Typewriter-like Typing Animation In Vanilla JavaScript – AutoTypeJS

Preview:

Description:

Yet another vanilla JavaScript library that applies a typewriter-like text typing (and deleting) animation to any text.

How to use it:

1. Load the minified version of the AutoTypeJS library in the document.

<script src="autotype.min.js"></script>

2. Load the autotype.min.css stylesheet for blinking cursors. OPTIONAL.

<link rel="stylesheet" href="autotype.min.css" />

3. Call the AutoType function on the target container.

<h1 id="headline"></h1>

AutoType("headline");

4. Define the text to be printed with a typing animation.

AutoType("headline", "AutoType JS Library Example");

5. Config the animation speed.

AutoType("headline", "AutoType JS Library Example", 300);

6. Perform an action after the animation has finished.

AutoType("headline", "AutoType JS Library Example", callback);

7. Add a blinking cursor to the end of the text while typing.

<h1 id="headline" class="autotype_horizontal_cursor">
  Horizontal Cursor
</h1>
<h1 id="headline" class="autotype_vertical_cursor">
  Vertical Cursor
</h1>

8. Erase the text with a deleting animation.

AutoBackspace("headling", 500, callback);