DEV Community

Cover image for AutoTyping.js: create animated typing effect
tsanak
tsanak

Posted on

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

Alt Text

Alt Text

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 🙂.

Top comments (0)