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("headline", 500, callback);

9. Trigger a function when the text has been printed.

AutoType("element", "Your text").then(() => {
  // Callback
});

Changelog:

v2.0.0 (01/19/2024)

• AutoType JS is now 2.6x smaller, at just 470B.
• You can now await the end of an AutoType effect.
• The effect is now more stable in general.
• The callback argument for both AutoType() and AutoBackspace() has been removed. If you want to use a callback function.