AutoTyping.js: create animated typing effect

AutoTyping.js

AutoTyping.js is a lightweight (1.86 kb) and easy to use library that helps you create animated typing effects.

It is a very small project that I finished in this weekend, so it is not super polished or feature rich.

Learn more about it on the Github repo or at it's website.

See it in action

How to use

1. Grab the minified version of the library from dist/autotyping.js

2. Create the html element:
   

   <span id="selector"></span>
   

3. Create a new instance of the library:
   

   const typing = new AutoTyping('#selector', [
       'array of',
       'text',
       'lorem ipusm'
   ]);
   

4. Start the typing effect
   

   typing.start();
   

Options

There are a few options to customize the behavior of the library and you can find them in Github repo.

Some of them are the following:

• typeSpeed (Integer) in ms, default: 150
  Controls the writing speed of each character.

• deleteSpeed (Integer) in ms, default: 150
  Controls how fast/slow each character is deleted.

• waitBeforeDelete (Integer) in ms, default: 1000
  Controls the waiting time before deleting a word.

• waitBetweenWords (Integer) in ms, default: 1000
  Controls the waiting time before writing the next word.

Examples in Codepen

Outro

Hope you found this useful, I will gladly accept any comment (improvement, bug, opinion) about this in the comments below 🙂.