Build a typing text animation with CSS and JavaScript

I was always wondering what it would take to build an text typing animation in the browser. Let’s find out how we can build this.

Step 1

Create a new project on Glitch.com. Choose the “Hello Webpage” template.

Step 2

In index.html, delete everything in <body> and in <head>, add https://code.jquery.com/jquery-3.4.1.min.js /script.js

We load jQuery before our own code so that jQuery is already loaded when our code starts to run. Otherwise, we’d see a lot of errors that the $ function is not defined.

Step 3

Let’s create our screen we will be using to output text. Inside the <body> tag, add this:

<div class="screen"></div>

We will be using this <div> to output our text.
Below that, add a <span>:

<span class="cursor">|</span>

This will be our blinking cursor.

Step 4

With all HTML in place, let’s add some basic styling in style.css:

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  background: #ff9f1c;
  color: #fdfffc;
  font-size: 25px;
}

.screen {
  display: inline;
}

.cursor {
  display: inline;
}

We configure a background color, a bigger font size for improved readability, text color and make sure that both the text and our cursor are shown inline.
The inline styles help us to show both the text and the cursor right next to each other without a line break.

Step 5

Time for the first JavaScript lines! We’re starting with "use strict"; in line 1 to enable the strict mode.

In the second line, we’re using a jQuery functionality that makes sure that our code will only start to run once the web page is fully loaded:

$(document).ready(function() {
});

$(document).ready() accepts a function that will get called once the website is fully present. If we weren’t using this mechanism, it’s likely that our code tries to access HTML elements on the page that are not fully present yet and would cause the code to fail.
Inside the function, we’re adding all of our code, starting with a variable that holds the text we want to show:

var word = "Hi Group! How are you?";

Step 6

Let’s render our text into the <div> we’ve created!

$(document).ready(function() {
    var word = "Hi Group! How are you?";
    $(".screen").html(word);
});

$(".screen").html allows us to add child elements to the <div> element with the class .screen.
You’ll see that it immediately renders the text instead of putting it out there character by character. Let’s fix that.

Step 7

Right now, the text gets rendered immediately because we’re adding all of it at the same time to the site.
It’s time to do it character by character now.

"use strict";
$(document).ready(function() {
  var word = "Hi Group! How are you?";
  var i = 0;
  while(i < word.length) {
    $('.screen').append(word[i]);
    i++;
  }
});

Yet still, when we run the code all letters appear at the same time. The reason for that is that they individually appear so fast that our eye cannot tell the difference. Computers are so fast!

Step 8

Let’s slow down the letter rendering. The way that I found most effective is to use window.setTimeout to delay adding the letters to the screen.

 window.setTimeout(function(character) {
      var element = $('<span>' + character + '</span>');
      $('.screen').append(element);
 }, 2000, word[i]);

You may notice that within the timeout function I’m not using word[i] as before. The reason for that is that whenever the timeout function executes, it’s looking at word[i] in that exact moment and i has already continued counting since the timeout function got queued for execution.
Because of this circumstance, we declare the function with an argument (function (character) { ... }) and pass the current character at the time of starting the timeout window.setTimeout(function(character) {...}, 2000, word[i]);. 2000 denotes how long (in milliseconds) the function should wait until it executes.
Let’s try to run this again and turns out that now we have a proper delay! Horay!

Step 9

In the last step we’re animating the cursor so that it continues to blink like in a proper terminal.

In index.html, we’ve added the <span> with class cursor. Through CSS we’ll now make it blink.
Open style.css and add

.cursor {
  display: inline;
}

Until a few years ago, animating anything required (a lot of) JavaScript. Now, with CSS3 we can leverage built-in animation features for CSS properties.
That’s what we’ll use to make our cursor blink. A lot of tutorials on CSS animation animate an element’s (background) color. Since the cursor should keep its white color, we’ll animate opacity instead.
Let’s have a look how that works. First, we need to define a keyframes rule:

@keyframes blink {
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes is a CSS keyword. It’s followed by a name to identify this animation. In this case I chose blink. Within keyframes, we’re defining animation steps. I chose 50% and 100% but I invite you to experiment with different percentages as well. For each percentage, we’re defining what value opacity should have. In this case, opacity values directly correspond to the keyframes percentages.

Once this is defined, let’s apply the animation on the cursor. Add animation: blink 1s infinite; to the .cursor class. animation accepts three parameters:

The @keyframes name, in our case blink
The duration, I chose 1s but I invite you to play with this
How often the animation should be repeated – we want it to be repeated infinitely.

And with that we’ve build a basic typing animation with JavaScript and CSS!

Check out the working example here: https://glitch.com/~animated-screen-project

—-
Further reading:

– CSS Animations https://css-tricks.com/almanac/properties/a/animation/
– setTimeout: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
– "use strict";: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

21 Lessons