Create a Typing Animation with JavaScript

Typing animations are a great way to grab your users’ attention and help give a website or application an interactive feel. With the right JavaScript code, you can create a typing animation that will type out some text letter by letter. In this tutorial, we’ll walk through how to create a typing animation using JavaScript.

1. Write the HTML and CSS

First let’s write the HTML for your typing animation. You’ll need a div element with an id that will be used to reference the element in our JavaScript code.

<div>
  <span id="typing-animation"></span>
  <span class="cursor-stale"></span>
</div>

.cursor {
  display: inline-block;
  vertical-align: bottom;
  width: 0.6em;
  height: 1em;
  background-color: #fff;
  animation: blink 1s infinite;
}

.cursor-stale {
  display: inline-block;
  vertical-align: bottom;
  width: 0.6em;
  height: 1em;
  background-color: #fff;
}

Here we made a div that contains a span where we will update the text, and a span that will look like a typing cursor on our screen.

2. Write the JavaScript

Now let’s write the JavaScript that will make the typing animation happen. We’ll start by defining some variables that will be used throughout the code.

// The text we want to animate
let text = "this is the string we will type to the screen"; 
// The current position of the animation
let index = 0; 

Next, we’ll write a function called typingAnimation() that will update the text and move it along letter by letter to create our typing animation effect. This function takes in an id parameters that is the id name of th element we’ve created in step . The typingAnimation() function should look like this:

function typingAnimation (id) {

  setTimeout(() => {
    index++;
    updateText(id);
    if (index < text.length) {
      typingAnimation(id);
    }
  }, 50)
}

This function uses setTimeout() to call itself every 50 milliseconds and move one letter ahead each time it runs. It also calls another function called updateText(), which takes in an id parameter and updates the element with the new text. The updateText() function should look like this:

function updateText(id) {
  // Get the element with our id
  const typing = document.getElementById(id); 
  // Split our text into lines based on newline characters or <br> tags
  const lines = text.substring(0, index).split(/\n|<br>/); 

  // Check if our element exists before updating it  
  if(typing == null){  
    return  
  }

  // Update the element with our new lines  
  typing.innerHTML = lines.map((line, index) => {  

    // Check if this is the last line in our text  
    const isLastLine = index === lines.length - 1;  

    // Add a line break if this isn't the last line of text  
    const lineBreak = isLastLine ? "" : "<br>";  

    // Return our line of text with or without a line break  
    return `${line}${lineBreak}`;  

  }).join("");

  // If we're done animating, hide stale cursor and show blinking cursor  
  if (index === text.length) {  
    // hide the stale cursor
    document.getElementById("cursor-stale").style.display = "none";  

    // Add a cursor at the end of our animation that blinks
    typing.insertAdjacentHTML("beforeend", '<span class="cursor"></span>');  

  }  
}

This is all the code you need for your typing animation! Now when you call typingAnimation(), it will animate your text letter by letter until it's finished!

Thank you for reading. If you liked this blog, check out my personal blog for more content like this.