DEV Community

Cover image for How to use typed.js
Ganesh Patil
Ganesh Patil

Posted on

How to use typed.js

What is typed.js

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
This is pure CSS animation you can make with basic CSS animation property but with Typed.js its easy to make this moving text animation effect.

How to used

to used typed.js you have to navigate to GitHub link of typed.js
and copy the CDN file

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

Add typed.js to project

add CDN file into bottom of your HTML file before closing body tag and open new script tag. The entire code looks likes

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
    var typed = new Typed(".mov",{
    strings: [,  "Ganesh","Content Writer","Web Developer"] ,
    typeSpeed: 100,
    backSpeed: 100,
    loop: true

    })
</script>

Enter fullscreen mode Exit fullscreen mode

and now add some simple HTML part to activate types.js code

  <h1> I'm  <span class="mov"> </span></h1>
Enter fullscreen mode Exit fullscreen mode

Now you observe the .mov class is main element of this entire process of types.js and its simple.

The complete output is here output
Link to my GitHub repository which contains file and code.

also Connect with me on twitter I am sharing content related web development and free resources which is actually helpful for you.

Discussion (1)

Collapse
shubham8550 profile image
Shubham Badgujar

Really helpful 👍 i was looking for something like this