- Open your Webflow project and navigate to the page where you want to add the autotype effect.
- Add an HTML Embed element to the location where you want the autotype effect to appear. You can do this by dragging an "Embed" element from the "Add Elements" panel to the desired location on your page.
- Copy and paste the following code into the HTML Embed element. This code includes the HTML structure and CSS for the effect.
<style>
#break-line {
display: none;
}
</style>
<h1 class="ks-h1">WE HELP<br><span id="ks-running-text" class="ks-h1-span"></span><br><span id="break-line"></span>COMPANIES<br>SCALE RAPIDLY</h1>
- Add another HTML Embed element to your page, preferably at the bottom of your page's body, to insert the JavaScript code responsible for the autotype effect.
- Copy and paste the following JavaScript code into the new HTML Embed element:
<script>
// Define an array of words to be displayed in the autotype effect
const words = ["innovative", "blockchain", "digital asset", "web3", "crypto"];
// Initialize variables to track the current word and text
let currentIndex = 0;
let currentWord = words[currentIndex];
let currentText = "";
// Declare a variable to store the timeout ID
let timeoutId;
// Set the typing speed for the effect (in milliseconds)
const typingSpeed = 200;
// The autotype function is responsible for typing each character of the current word
function autotype() {
// If the current word is fully typed (including the "_" character)
if (currentText.length === currentWord.length + 1) {
// Call the erase function after a 1-second pause
timeoutId = setTimeout(erase, 1000);
} else {
// Add the next character from the current word followed by the "_" character
currentText = currentWord.substring(0, currentText.length) + "_";
// Update the text content of the "ks-running-text" span element
document.getElementById("ks-running-text").textContent = currentText;
// Call the autotype function again after the specified typing speed
timeoutId = setTimeout(autotype, typingSpeed);
}
}
// The erase function is responsible for erasing each character of the current word
function erase() {
// If only the "_" character is present
if (currentText.length === 1 && currentText.endsWith("_")) {
// Increment the currentIndex and update the currentWord
currentIndex = (currentIndex + 1) % words.length;
currentWord = words[currentIndex];
// Reset the currentText
currentText = "";
// Call the autotype function to start typing the next word
autotype();
} else {
// Remove the last character (excluding the "_" character) from the current word
currentText = currentWord.substring(0, currentText.length - 2) + "_";
// Update the text content of the "ks-running-text" span element
document.getElementById("ks-running-text").textContent = currentText;
// Toggle the display of the "break-line" span element based on the presence of the "_" character
if (currentText === "_") {
document.getElementById("break-line").style.display = "inline";
} else {
document.getElementById("break-line").style.display = "none";
}
// Call the erase function again after the specified typing speed
timeoutId = setTimeout(() => {
erase();
}, typingSpeed);
}
}
// Begin the autotype effect after the initial typing speed delay
timeoutId = setTimeout(() => {
autotype();
}, typingSpeed);
// Add an event listener for the "blur" event to stop the autotype effect when the window loses focus
window.addEventListener("blur", () => {
clearTimeout(timeoutId);
});
</script>
- Publish your changes in Webflow, and you should see the autotype effect in action on your live site.
Here's a brief explanation of how the code works:
- The HTML structure contains a header with the fixed text "WE HELP" and "COMPANIES SCALE RAPIDLY", and a span element with the ID "ks-running-text" where the changing words will appear.
- The CSS hides the "break-line" span element, which is used to maintain the correct layout when only the "_" character is displayed.
- The JavaScript code defines an array of words to cycle through, and two main functions, autotype() and
- The JavaScript code defines an array of words to cycle through, and two main functions, autotype() and erase(), handle the typing and erasing of words, respectively.
- The autotype() function checks if the current word has been fully typed (including the "" character) and if so, calls the erase() function after a 1-second pause. Otherwise, it adds the next character from the current word followed by the "" character, updates the text content of the "ks-running-text" span element, and calls itself again after the specified typing speed.
- The erase() function checks if only the "" character is present. If so, it increments the currentIndex, updates the currentWord, resets currentText, and calls the autotype() function to start typing the next word. Otherwise, it removes the last character (excluding the "" character) from the current word, updates the text content of the "ks-running-text" span element, and calls itself again after the specified typing speed.
- The code also includes an event listener for the "blur" event to stop the autotype effect when the window loses focus, ensuring that the effect does not continue indefinitely when the user switches to another tab or application.
By following the steps outlined in the tutorial and implementing the provided code in your Webflow project, you should be able to add the autotype effect to your website successfully.