How to create “Typing Effect” in CSS and JS

JW
JW
Jan 6 · 5 min read

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

Image for post
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.

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:

Image for post

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.

Image for post
@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.

Image for post

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")
Image for post

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");
});
Image for post

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.

Image for post

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! :)

Frontend Weekly

It's really hard to keep up with all the front-end…

JW

Written by

JW

Full time frontend developer (mostly).

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

JW

Written by

JW

Full time frontend developer (mostly).

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store