GITHUB

DESCRIPTION

AutoTyping.js is a lightweight (1.86 kb) and easy to use library that writes and deletes text.

GETTING STARTED

  1. Grab the minified javascript file from dist/autotyping.js
  2. Initiate the library with const typing = new AutoTyping('selector', [array of words]);

    e.g.

    const typing = new AutoTyping('.my-selector', ['lorem ipsum etc', 'after the first text']);
  3. Start the typing with below code: typing.start();

OPTIONS

  1. [REQUIRED] selector (either the id or the class of the element). The selector is where the autotyping will be initiated.
  2. [REQUIRED] text (Array of Strings). e.g. 
    [
    'first text',
    'second text',
    'etc...'
]
    This is where you write the text that will be written and deleted by the library.
  3. [OPTIONAL] options (object/map). This is how you control the library's behavior.
    • typeSpeed: in ms, default: 150

      Controls the writing speed of each character.

    • deleteSpeed: in ms, default: 150

      Controls how fast/slow each character is deleted.

    • waitBeforeDelete: in ms, default: 1000

      Controls how much time the library will wait before deleting a word.

    • waitBetweenWords: in ms, default: 1000

      Controls how much time the library will wait before writing the next word.

    • writeWhole: Boolean, default: false

      Controls if the text should be written all together (word per word and not character by character).

EXAMPLES

HTML: 
<p>This is an example: <span class="example-selector"></span></p>
Javascript: 
<script src="dist/autotyping.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const exampleText = ['I can write a whole sentence.', 'Or', 'single', 'words'];
        const exampleTyping = new AutoTyping('.example-selector', exampleText, {
            typeSpeed: 50,
            deleteSpeed: 50,
            waitBeforeDelete: 2000,
            waitBetweenWords: 500,
        });
        exampleTyping.start()
    });
</script>

This is the live example of the above code:

This is an example: