DEV Community 👩‍💻👨‍💻

Cover image for Typing Effect with typed.js
Jatin Sharma
Jatin Sharma

Posted on • Updated on

Typing Effect with typed.js

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.

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

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

HTML

<h1>Hi, I am <span class="title"></span></h1>
Enter fullscreen mode Exit fullscreen mode

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

JS

var options = {
  strings: ["Jatin Sharma", "React Developer", "Python Developer"],
  typeSpeed: 40,
  backSpeed: 40,
  loop: true
};

var typed = new Typed(".title", options);
Enter fullscreen mode Exit fullscreen mode

codepen

Conclusion

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 visit the given link.

You can now extend your support by buying me a Coffee.😊👇
buymecoffee

Also Read

Top comments (18)

Collapse
 
zippcodder profile image
Deon Rich

I suppose this is helpful, but I would expect this to be a tutorial from scratch, rather than simply showing the use of a function from a library.

Collapse
 
j471n profile image
Jatin Sharma

Well yeh we can do that also. But this library made that procedure simple so that's why I used that.

Collapse
 
zippcodder profile image
Deon Rich

Yeah theres nothing inheritly wrong with doing that, but typically out of a tutorial readers want an in depth explination on how to acomplish a task themselves, rather than saying the solution is to use a pre-built solution. Im not trying to be rude, just an insight.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
zippcodder profile image
Deon Rich

Well, you aren't wrong.

Collapse
 
j471n profile image
Jatin Sharma

I didn't say you have to buy me a coffee. It's just up to you. By the way i drink it everyday 😉

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
justkeithcarr profile image
Keith

But why would this need a tutorial.. I'm so lost. It's pretty straightforward..

Jason please continue putting up tips! Thanks

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
j471n profile image
Jatin Sharma

Because it's looks cool I guess. 🤔

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
j471n profile image
Jatin Sharma

Chill man you are looking a bit angry, It looks like your day wasn't good at all.

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
j471n profile image
Jatin Sharma

Then it is fine. Hope you have a beautiful day.

Collapse
 
leftright1 profile image
leftright1

Hello,
That's not really SEO friendly to do this on a H1 tag.

Collapse
 
j471n profile image
Jatin Sharma • Edited on

I am just demonstrating the procedure you can use wherever you want. Not just in h1 tag.

Collapse
 
leftright1 profile image
leftright1

There are better solutions that use Dom instead of append into it.
Also better as a noscript fallback for exemple.

Thread Thread
 
j471n profile image
Jatin Sharma

Yeh totally right 👍

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Classic DEV Post:

caching

Web Caching Explained by Buying Milk at the Supermarket