Ed Bartholomew
Close-up of a typewriter in black and white

How to create a typing animation with Typed.js

Published on 3rd February 2022

Typed.js is a great way to add a typing animation to your website. In this article, I will show you two different approaches to setting it up.

Adding Typed.js

The first thing you will need to do is add Typed.js to your project. You can do this by downloading the latest version from GitHub or by using a CDN like jsDelivr. Whichever you choose, you will need to add a script tag to your page pointing to typed.js.

<script src="typed.js"></script>
Copy

Option 1: Storing the text within the HTML (better for SEO)

If it is important for all your text to be visible by search engine crawlers, then it might be best for you to use this approach.

You will need to create two span tags, one with the id “typed-strings” which will be where we store the text. The second span tag should have the id “typed”. This one will be where Typed.js does its magic.

Inside the “typed-strings” span tag, add all of your text. Wrap each word or phrase with another span tag so Typed.js knows they are separate.

<div>
    Let's count to five with Typed.js: 
    <span id="typed-strings">
        <span>one</span>
        <span>two</span>
        <span>three</span>
        <span>four</span>
        <span>five</span>
    </span>
    <span id="typed"></span>
</div>
Copy

Next, to get the typing effect to work, create a new Typed object and pass the “typed” element id. Then add a property called “stringsElement” and set the value to the “typed-strings” element id.

var typed = new Typed('#typed', {
    stringsElement: '#typed-strings',
    typeSpeed: 40, // Optional
    backSpeed: 40, // Optional
    backDelay: 1000, // Optional
    loop: true, // Optional
});
Copy

Option 2: Storing the text within a data attribute

If it is not crucial for search engine crawlers to be able to read the text, then storing it within a data attribute will work well. Another option would be storing all the text in JavaScript, but doing it this way instead means you can edit all the content of your page from the same place.

This time, we will only create one span tag with the id of “typed-strings”, then add a data attribute called “data-typed” which will be where we store the text. Next, set the data attribute to an JSON array containing your text.

<div>
    Let's count to five with Typed.js: <span id="typed-strings" data-typed='["one", "two", "three", "four", "five"]'></span>
</div>
Copy

The JavaScript for this option is slightly different from before. Create a new Typed object and pass the “typed-strings” element id.

Add a property called “strings” which we will set to the value of the data attribute. To do this, use “document.querySelector” and the “dataset” property to access the JSON array with our text in. Put this inside the “JSON.parse()” function to convert the JSON array into a JavaScript object which Typed.js can read.

var typed = new Typed('#typed-strings', {
    strings: JSON.parse(document.querySelector("#typed-strings").dataset.typed),
    typeSpeed: 40, // Optional
    backSpeed: 40, // Optional
    backDelay: 1000, // Optional
    loop: true, // Optional
});
Copy
© Ed Bartholomew 2024