How to create “Typing Effect” in CSS and JS

This is a short article for how to create dynamic typing and deleting text animation with CSS and JS

Content

1. Introduction
2. Result demo
3. Prerequisite
4. Step by step guide
5. Conclusion

Introduction

Totally unrelated picture

Making a typing effect with CSS and JS is extremely easy. If you think about it, the whole effect is just a combination of a “blinking” input cursor looking thing, and the addition and subtraction of letter from a sentence. It could be done with the following steps:

1. Create an element that looks like a blinking input cursor
2. Create a sentence, position the above element at the end of it
3. Use JS to add and subtract letter from the sentence one by one

And there you have it, a working typing effect. In the following article, I will go through each steps one by one.

Result Demo

Codepen: https://codepen.io/josephwong2004/pen/ExgoKde?editors=1010

Prerequisite

Basic HTML, CSS and JS knowledge

Step by step guide

Step 1: Select a font style

The font is the soul of the typing effect. As user will mostly ignore the “blinking” input cursor once they realise it is just a little effect, how the font looks and present itself to the user will greatly impact the experience. Both Serif and San Serif font could be useful depending on the design you are going for. Although I would suggest to go for a less “Handwriting” looking font as the letter is being “Typed”.

The font I go for is “Darker Grotesque”, which suit our need for this tutorial:

Step 2: Set up the basic structure

We will need one element for the “sentence” part, and another element for the cursor part. On top of that, let also wrap these two element with a parent container so it is easier to position it:

<div class="typing-container">
    <span id="sentence" class="sentence"></span>
    <span class="input-cursor"></span>
  </div>

Next, we will need to add some basic CSS in order to make the sentence and input-cursor align on the same line, and style the “input-cursor” to make it look like a typing cursor:

.typing-container {
      display: flex;
      justify-content: center;
      align-items: center;
}
 .input-cursor {
      display: inline-block;
      width: 2px;
      height: 42px;
      background-color: white;
      margin-left: 8px;
}

As you can see, the sentence is ending with the “input-cursor”. Now let add animation as well to make it blink.

@keyframes blink {
    0% {opacity: 1;}
    40% {opacity: 1;}
    60% {opacity: 0;}
    100% {opacity: 0;}
  }
// Then, inside .input-cursor:
.input-cursor { 
  animation: blink .6s linear infinite alternate;
}

The reason for using 0–40% and 60–100% pattern instead of just opacity 1 in 0% and opacity 0 in 100% is, if you observe a typing cursor, it doesn’t gradually “disappear”. Instead, it will stay visible for a while, then suddenly, completely disappear for a while. This pattern repeat itself.

Now the input cursor start blinking and look actually like one. We can move on to the JS part.

Step 3: Add JavaScript to “type” and “delete”

Let make two function in our JS file, one is for “typing”, and another is for “deleting”. With these two function, we could trigger the change of the sentence anytime we please.

Starting with the “typing” function. It will take any sentence as input, and then add each letter of the sentence to your HTML element, one at a time with some delay. We could first split the sentence into array of letter, use jquery to append the letter into HTML element one by one, and then use a “setTimeout” function to make the “delay” between each append.

If you are not familiar with async await pattern, basically, it allow your code to execute line by line. so inside the while loop, “waitForMs” will execute for 0.1 second, and then letter will be appended to the HTML

Let try call our function like so and see the result.

typeSentence("Hey, over here!", "#sentence")

Great! We already have our typing working. Now let add a “delete” function as well so we have more effect to play with.

The “delete” function is not that different. Instead of taking a sentence input, this time, we would take what is originally inside the HTML element, and then split that to an array, and remove letter from the array one by one. On each removal of the letter, we need to update the HTML element. Similarly, the delete function would have some delay.

Now, let try typing a sentence, and then remove it.

$( document ).ready(async function() {
  await typeSentence("Mr. Stark, I don't feel so good..", "#sentence");
  await waitForMs(2000);
  deleteSentence("#sentence");
});

Great! We now have delete as well. We could do a lot of thing with typing and deleting, the possibility is endless.

Step 4: Make a text carousel

Just like the demo, let make ourself an endless looping carousel that show different words.

Using our “typing” and “deleting” function, we could setup an infinite loop that, go through an array of words, start typing out the first word, after the whole word is completed (luckily, since we are using async function for typing, we could easily tell by “await” it), start to delete it. This pattern continue for every words in the list, and when we reach the end of the list, simply return the counter to start.

We would need to add one more HTML element in order to show the word in carousel. I will call it “feature-text”

<span id="feature-text"></span>

To make thing more interesting, I added another function to change the color of the feature-text. You could set different css style within your data.

And there you have yourself a basic typing carousel effect. You could use this knowledge to create more interesting pattern.

Conclusion

I hope you enjoy this tutorial. There are probably a hundred ways to create the same effect due to its simplicity, if you are using a framework, you might consider better solution like variable binding. If you like this article, feel free to leave a comment or a like! :)