Typewriter Typing Simulation Library – typing.js

Preview:

Description:

An easy and lightweight JavaScript library for typewriter effect that animates the print of your text as if was typed by a human being.

How to use it:

1. Load the typing.css if you need a blinking cursor at the end of the text while typing.

<link rel="stylesheet" href="./typing.css" />

2. Define your text to be typed in a Source element.

<div id="source">
  Text <br />
  Text
</div>

3. Create an Output element in which you want to print the text with a typewriter effect.

<span id="output"></span>

4. Create a typing-cursor element to place the blinking cursor.

• typing-cursor or typing-cursor-black: black cursor
• typing-cursor-white: white cursor

<span class="typing-cursor">|</span>

5. Load the JavaScript file typing.js right before the closing body tag.

<script src="./typing.js"></script>

6. Initialize the library.

var typing = new Typing({
    source: document.getElementById('source'),
    output: document.getElementById('output')
});

7. Start the typing effect when needed.

typing.start();

8. Determine the time to wait before starting the typing effect. Default: 120(ms).

var typing = new Typing({
    source: document.getElementById('source'),
    output: document.getElementById('output'),
    delay: 120
});

9. Execute a function after the typing effect is finished.

var typing = new Typing({
    source: document.getElementById('source'),
    output: document.getElementById('output'),
    done: function() {
      console.log(this);
      console.log('done')
    }
});

10. Pause & resume the typing effect.

typing.pause();
typing.resume();