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
- Grab the minified version of the library from
dist/autotyping.js
-
Create the html element:
<span id="selector"></span>
-
Create a new instance of the library:
const typing = new AutoTyping('#selector', [ 'array of', 'text', 'lorem ipusm' ]);
-
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)