Servage Magazine

Typer.js is a JavaScript library that allows you to create animated typing effects for any kind of text. Animated typing is often found on product landing pages to impress visitors with features of a product. In addition to a nice visual experience, libraries like Typer.js allow you to have many sentences that erase the previous one, resulting in less screen space required for text.

Getting started

Setting up Typer.js on your website is simple: Just download the JavaScript file from www.steven.codes/typejs and include it on your website using a <script> tag and you are ready to go! Unlike many other JavaScript libraries, Typer.js does not depend on jQuery or any other libraries. It has been written in pure JavaScript. Being only about 100 lines of code, Typer.js is also very lightweight.

Using Typer.js

Typer.js can be used with many elements, but a <span> tag is the most common choice. To animate text, create a <span> tag with a class of “typer”. On top of these, you have to use some HTML attributes to specify what text should be animated and how. Here is an example of a simple animated text: <p>I like <span class=”typer” data-words=”apples,oranges”></span>.</p>. This animates the words apples and oranges. The animation works so that apples will be typed first and then after a while, it will be erased and oranges will be typed with a nice visual typing animation.

By default, the animated words are specified using the data-words attribute and words are separated by commas. It is possible to change the delimiter using a data-delim attribute. To use colons instead, use data-delim=”:”.

Changing typing speed

There are some other useful attributes as well. One of the most useful ones is the data-delay attribute. It allows you to change the speed at which each individual character is typed. The default is 200 milliseconds. To set the speed to 500 ms, use data-delay=”500”.

Custom colors

You can also change the color of animated words with the data-colors attribute. The colors are cycled so that one color is used for one word and the next color for the next word. An example of this would be data-colors=”red, orange, blue”.

Setting an erasing delay

The default delay for erasing a completely typed word is only 800 ms. You may want to increase this using the data-deleteDelay attribute. Just specify a new delay in milliseconds. For instance: data-deleteDelay=”3000” increases the delay to 3 seconds.

These are the attributes you will most likely want to customize. You can customize Typer.js further, for example by adding a blinking cursor to make the animation look even more like realistic typing. Keep exploring the library for even more features!