10 Best Typewriter Typing Animations In JavaScript (2021 Update)

by jQueryScript,

Want to print your text with a typewriter effect?

Use these 10 Best Typing Animation libraries implemented in jQuery, Vanilla JavaScript, or Pure CSS to simulate typewriter-like text typing and deleting effects for your headlines, titles, and any import text messages. Have fun.

Originally Published Dec 30 2017, updated Feb 26 2021

Table of contents:

jQuery Text Typing Plugins:

Terminal Text Typing Effect In JavaScript - Typed.js

Yet another Vanilla JavaScript plugin for emulating the terminal typing effect that enables you to print html or plain text as if it's being typed on the screen.

Terminal Text Typing Effect In JavaScript - Typed.js

[Demo] [Download]


Animate Typing & Deleting Of Text - animateTyping.js

animateTyping.js is an easy-to-use jQuery plugin to simulates the typewriter effect that animate the typing and deleting of text within a container element.

Animate Typing & Deleting Of Text - animateTyping.js

[Demo] [Download]


Dynamic Text Rotator With Typing Effect - jQuery typer.js

typer.js is a very small jQuery text rotator plugin which allows you to rotate through an array of text strings with typewriter style typing and deleting animations.

Dynamic Text Rotator With Typing Effect - jQuery typer.js

[Demo] [Download]


Creating Simple Text Typing Effect with jQuery TypeText Plugin

TypeText is a really simple jQuery text plugin used to output text with animated typewrite typing effect.

Creating Simple Text Typing Effect with jQuery TypeText Plugin

[Demo] [Download]


Simple Fast Text Typing Animation In JavaScript/jQuery - Typing.js

Typing.js is a simple, lightweight jQuery/JavaScript typing animation plugin that allows to type an array of text strings in a selected element with custom caret character.

Simple Fast Text Typing Animation In JavaScript/jQuery - Typing.js

[Demo] [Download]


Vanilla JS Text Typing Animations:

1. TypewriterJS

TypewriterJS is a native javascript plugin that can be used to create an elegant automatic typewriter animation effect on websites.

Simple Typewriter Effect In Pure JavaScript - TypewriterJS

Demo Download


2. Multi-line Typewriter Effect With Blinking Cursor – tply

Multi-line Typewriter Effect With Blinking Cursor – tply

A lightweight yet configurable text animation plugin to make your text appear as if it is being typed on a typewriter or terminal, with a blinking cursor animated with CSS3.

Demo Download

3. Highly Configurable Text Typing Library – typed.js

Just another JavaScript text typing animation library that animates your text to make it look like it is being typing.

typed.js

Demo Download


Vintage Typing Animation With Sound Effect – Typewriterjs

A vanilla JavaScript library which applies a typewriter-like typing effect to text content with support for custom cursor and sound effect.

Vintage Typing Animation With Sound Effect – Typewriterjs

Demo Download


Pure CSS Text Typing Animation:

Pure CSS Text Typing Animation

Just another pure CSS implementation of the text typing animation using pseudo elements and CSS3 animations. Also can be used as a text rotator with a character typing effect.

Pure CSS Text Typing Animation

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Text Typing Effects on the web & mobile? Check out the jQuery Text Typing and JavaScript/CSS Text Animation sections.

See also: