Typing Effect with typed.js

This article show how you can make typing effect using Typed.js, In this you can pass array as argument and it will iterate over that and will show you the result in the typing form.

Jatin Sharma

Dec 8, 2021

2 min read·225 words

As you may have already seen some website which has some kind of typing animation. It looks cool right but what if I tell you it is very easy to do.

I have already made an article about how you can make this type of effect with CSS but today we will build something different than that. In this effect, you can give multiple strings and it will display one by one.

First of all, let's visualize what I am talking about -

Preview

preview

To make this work we need to use a library called typed.js So firstly add the following script to your project.

HTML

index.html

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

Now let's look at the rest of code, how this is cooking.

index.html

<h1>Hi, I am <span class="title"></span></h1>

<h1>Hi, I am <span class="title"></span></h1>

HTML is very simple we just need to use only one element in order to make this work.

Javascript

script.js

var options = {
  strings: ["Jatin Sharma", "React Developer", "Python Developer"],
  typeSpeed: 40,
  backSpeed: 40,
  loop: true,
};
 
var typed = new Typed(".title", options);

var options = {
  strings: ["Jatin Sharma", "React Developer", "Python Developer"],
  typeSpeed: 40,
  backSpeed: 40,
  loop: true,
};
 
var typed = new Typed(".title", options);

Wrapping up

It is as simple as that, now you can use this in your projects wherever you want. To learn how you can make typing effect in CSS Click Here