How To Make Text Typing Effect?

Want to see text typed automatically? Here is all that you need.

Hello, Today here is our third article in the “How To Make” series.

It will look like:-

Animated Text GIF

You can read the previous articles in the series by clicking below:-

1. How to make an Interactive Envelope?
2. How to make a Modal Box without using only CSS?

First, I am going to illustrate how to make this effect using vanilla JavaScript and then Amitesh Kumar will illustrate how to achieve the same effect using Typed.js Library which will make our task easy and fast.

Using Vanilla JavaScript

Pre-requisites:-

1. Intermediate Knowledge of HTML and CSS
2. CSS animations using keyframes
3. Basics of JavaScript like Immediately Invoked Function Expressions (IIFE), Arrays, Document Object Model API (DOM), and JavaScript Timers.

Now, I will illustrate how to make it using pure JavaScript:-

Step 1(Optional) — I will create a “wrapper” div element to position the text in the middle of the screen and link CSS and JavaScript files with the async attribute to execute it as soon as possible.

HTML:-

Basic HTML Template to get Started

CSS:-

Basic CSS styling to position the element and to set the color of the body to the black color

Step 2 — Now, I will create a div element with a class name “typed” and id “typed” and then insert some “<p>” elements inside with the class name “text” and style them such that none of them are visible because they are just being used to provide the text to be written and isn’t going to appear on the page.

HTML:-

Wrapper div with <p> tags inside which provides us the strings

CSS:-

CSS styling for “typed” class and “text” class inside it

I will make the position of the paragraph element absolute so that they stack over each other and the maximum width of the containing box will be equal to the maximum width of all the paragraph elements and then set the visibility property to hidden.

Note — The font used is a Google Font and don’t forget to the set position of the containing element to relative so that paragraphs position themselves according to it.

Step 3(Optional) — I will use JavaScript “strict mode” and write all the code inside an Immediately Invoked Function Expression (IIFE)to avoid polluting the global namespace.

JavaScript:-

Immediately Invoked Function Expression (IIFE) and Strict Mode template

Step 4 — I will make two arrays: One named “contentArray” to store the strings contained inside the “<p>” element with the class name “text” and second named “typedElement” which will store all the element objects with the CSS selector “.typed >.text” and then insert the text content into the “typedElement” array using textContent property of the element object using a for loop.

JavaScript:-

Loop to collect all the strings from <p> tag to the Array named “contentArray”

Step 5 — Now, I will do the following series of steps:-

1. I will dynamically create a “<p>” element using the document object createElement method and store it in the variable named “typedPara”, then
2. I will append the “typedPara” using the document object appendChild method into “typed” div, then
3. I will create a “<span>” element similarly and store it in a variable named “underScore”, then
4. I will add the text node “_” inside above “span” using the document object createTextNode method, then
5. I will add the class “blink” using the Element Object classList add method as shown below to mimic the blinking effect of the cursor.

JavaScript:-

Variable Declarations

CSS:-

“blink” class and keyframes animation in CSS

Step 6 — Now, I will write the main code to mimic the typing effect.

JavaScript:-

Main setInterval() loop to mimic the typing effect

Step-By-Step Explanation:-

1. I will initialize the variables loop i and j to 0.
2. I will initialize the flag variable to 0 which will be used to tell the program when to use the delete part and insert part.
3. I will use setInterval() to control the timing of each step.
4. When the flag variable is 0, the program will continuously insert the characters of the string stored in the multi-dimensional array named “contentArray” till variable j becomes equal to the length of the string stored at contentArray[i] where different i stores different strings based on their position in the document.
5. When the flag variable is 1, the program will continuously delete the characters before the underscore(“_”) element one-by-one using the removeChild method of the Element object.

The flow-chart below explains the flow of the setInterval():-

setInterval() flow chart to aid in understanding the above code

Now, we are done with the programming part and the required effect is ready. So, we are good to go.

It is highly likely that you have gotten tired by now, reading the above section, so, to keep things Interesting, Easy and Fast we are going to use typed.js JavaScript library to achieve the same effect.

This article is written by Amitesh Kumar and you can refer the bottom-most section to contact him regarding the below section.

Using Typed.js JavaScript Library

Pre-requisites:-

1. Basic Knowledge of HTML and CSS
2. Basic JavaScript (Basic Syntax)

What is Typed.js?

• Typed.js is a library that writes. Enter in any string and watch it type at the speed you have set, delete it one by one and begin a new sentence for any number of strings you have specified.

Let’s start:-

Step 1 — I will create a basic HTML and CSS template where our text will be written and position the span tag where the text will be typed, accordingly.

HTML:-

Basic HTML Template

CSS:-

CSS styling to position the elements and to style the body

Step 2 — Its time to connect our typed.js library to our HTML page. Search “Typed.js” on google and open its git repository where you will find its source code. I am providing the link here itself for the git repository.

mattboldt/typed.js

Here you can find all kinds of stuff about this “typed.js” library and you can play with the code anytime.

So, now let’s move on to the 3rd step.

Step 3 — Clone this repository on your computer or download the zip file. I downloaded the zip file and extract it in the working directory.

After extracting the source code in the working directory, go inside that folder and open the “lib” folder which contains the typed.js code.

In the extracted folder

typed.js file is here

Step 4 — Now for our little project, we need this typed.js file so copy it and paste it in the working directory and connect this with HTML page you are using.

HTML:-

Connecting typed.js file

Step 5 — Now we have to write the main code for printing out text.

HTML and inline JavaScript:-

Code in “script” tags:-

I will explain to you the above code, Step-By-Step :

1. Now, as we are using typed.js library we create a new Typed object and pass the span element ID, followed by a “strings” property which specifies the ID of existing div element containing the text(if you have already written the string you want to print using a div tag)or in my case simply the string array with any number of strings you want to print.
2. Now, specify the typing speed using the “typeSpeed” property of the typed object and the backing speed using “backSpeed” and set the value you want.
3. Lastly, if you want the typing to continue in a loop, set “loop” to “true”.

Congratulations! You are ready to use your automatic typing animation effect.

Thank You for reading this article.

This article is a collaboration between Amitesh Kumar and Ankit Kumar.

Here are our medium profiles to go through-

1. Amitesh Kumar
2. Ankit Kumar

Happy Coding!