10 Best Typewriter Typing Animations In JavaScript (2020 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 15 2020

Table of contents:

jQuery Text Typing Plugins:

jQuery Plugin for Typing In Input with Amazing CSS3 Effects - Fancy Input

Fancy Input is an amazing jQuery form plugin that adds fancy CSS3 effects to your input fields or textarea (v1.1.0+) when users typing in. 

jQuery Plugin for Typing In Input with Amazing CSS3 Effects - Fancy Input

[Demo] [Download]


jQuery Plugin For Customizable Terminal Text Effect - TypeIt

Just another jQuery typewriter-style text animation plugin that simulates someone typing and deleting over an array of words.

jQuery Plugin For Customizable Terminal Text Effect - TypeIt

[Demo] [Download]


Simple Text Typing Effect with jQuery

An extremely simple text effect built with jQuery that displays a sequences of characters letter by letter similar to a typewriter.

Simple Text Typing Effect with jQuery

[Demo] [Download]


jQuery Plugin To Simulate Terminal Text Effects - t.js

t.js is a lightweight, programmable jQuery plugin to print any text with configurable typing and erasing effects just like you type something in a terminal.

jQuery Plugin To Simulate Terminal Text Effects - t.js

[Demo] [Download]


jQuery Plugin To Simulate Human Typing - typetype

typetype is a fancy jQuery text animation plugin which allows you to simulate human typing in an Html container like textarea, input, etc.

jQuery Plugin To Simulate Human Typing - typetype

[Demo] [Download]


Vanilla JS Text Typing Animations:

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.

jQuery Plugin To Simulate Human Typing - typetype

[Demo] [Download]


Pure JS Text Rotator With Typing / Deleting Effects – iTyped.js

iTyped.js is a lightweight, dependency-free JS library that allows you to rotate a sequence of strings with text typing / erasing effects just like a typewriter.

Pure JS Text Rotator With Typing / Deleting Effects – iTyped.js

[Demo] [Download]


Simple Typewriter Effect In Pure JavaScript – 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]


Animated Typing Effect In Pure JavaScript – Typical

Typical.js is a minimal, standalone JavaScript library to create an animated typing effect with support for deleting, pausing, waiting, looping, promise, and more.

Animated Typing Effect In Pure JavaScript – Typical

[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: