Code Typing Text Animations with jQuery TypeIt

By Jake Rocheleau. in Toolkit. Updated on July 17, 2022.

The combo of jQuery and text holds no bounds on the web. You can build almost anything with a bit of creativity and the right JavaScript libraries.

One such library is TypeIt, built as a free jQuery plugin. It lets you create dynamic typing animations that look incredibly realistic. You can even define custom pauses between keystrokes to build your own easing for the animation.

TypeIt is 100% free and open-source, built as a text tool for the jQuery community. All of the documentation is available online and incredibly easy to follow.

However, just note that while TypeIt does come with a free personal license, commercial licenses do, unfortunately, cost money. But, you can use the free personal license forever and it never expires, so it’s a great resource for all your personal projects or even your personal website.

You can get started by adding the raw TypeIt JavaScript file via CDN right to your page’s header. Then add jQuery, write some text, and connect it all together. Simple!

Typically, you’ll target a specific div on the page and use it as a container for the text animation. Here’s a sample code snippet to show you how this works:

$('.type-it').typeIt({
     strings: ['This is my string!']
});

By passing custom options to the typeIt() function, you can slow down the typing speed, add pauses at certain intervals, and even reset the settings at certain intervals to change the typing speed mid-animation.

You can even test these options on the plugin page if you’re willing to spend some time toying around with the settings.

This text animation builder is the perfect example of what you can do with this plugin. You get so many custom options that you can even build a web app, using this plugin, to create animations on the fly!

On the main plugin page, you’ll also find more advanced options towards the bottom with code snippets you can copy.

So, download TypeIt and give it a shot! Once you get it working it’s really a lot of fun. And, if you have any questions or suggestions for the developer you can connect with him on Twitter @amacarthur.