DEV Community

Cover image for How to Easily Create a Typewriter Effect with JavaScript
Miguel Nunez
Miguel Nunez

Posted on • Updated on

How to Easily Create a Typewriter Effect with JavaScript

Ever wonder how to create a typewriter effect? If you've never tried it, it might seem hard to even think of how you would go about it. A simple Google search will yield a couple of different solutions. In my experience, most of them weren't very versatile, at least not the ones I found. Sure, they worked well when I tested them in a basic project containing nothing but the typewriter effect. However, when I added the code into a more complex project, it easily broke.

After spending sometime deciphering how these solutions were going about creating the effect, I came up with an easier solution that works in most cases and the code is easy to understand. Let's break it down.

In the HTML, all you need is an element that displays the words you want the typewriter to type. Don't forget to give it an id so you can access it with JavaScript.

<p id="message"><p>
Enter fullscreen mode Exit fullscreen mode

In the CSS, we'll create the blinker effect. This is not necessary but I highly recommend it because it makes it look more realistic. The blinker is created using an animation that sets the opacity to 0 every half second. Pretty simple right?

span{
  animation: blinker 1s linear infinite;
}

@keyframes blinker{
  50%{
    opacity: 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

In our JavaScript file, let's create three variables. The first one is an array that contains a string with the message we want to display. The second indicates the text position of the string, you'll see what this does in a moment. The third variable holds the speed of the typewriter effect in milliseconds. The more you decrease this number, the faster the effect will be.

var quoteArray = ["DEV is a awesome community for developers!"];
var textPosition = 0; 
var speed = 100;
Enter fullscreen mode Exit fullscreen mode

Finally, let's add the function that creates the typewriter effect. Here, we access the p element from the HTML file and set its innerHTML equal to the first index of the array and the span holding the blinker. We also attach the built in substring(0, textPosition) function to the array. This is where the magic happens, as long as textPosition is not equal to the size of our string, it will keep incrementing and calling the setTimeout function, which keeps calling the typewriter function. Each time this happens, a new letter of the string is displayed. The last line simply calls the typewriter function for the first time when the page loads.

typewriter = () => {
  document.querySelector("#message").innerHTML = quoteArray[0].substring(0, textPosition) + '<span>\u25AE</span>';

  if(textPosition++ != quoteArray[0].length)
    setTimeout(typewriter, speed);
}

window.addEventListener("load", typewriter)
Enter fullscreen mode Exit fullscreen mode

Style as desired and that's it! Not making sense? Check out a more in depth tutorial video.

Discussion (0)