Typewriter-like Typing Animation In Vanilla JavaScript – AutoTypeJS

Category: Animation , Javascript , Text | February 9, 2022
Views Total:146 views
Official Page:Go to website
Last Update:February 9, 2022


Typewriter-like Typing Animation In Vanilla JavaScript – AutoTypeJS


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>

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 id="headline" class="autotype_vertical_cursor">
  Vertical Cursor

8. Erase the text with a deleting animation.

AutoBackspace("headling", 500, callback);

You Might Be Interested In:

Leave a Reply