typewriter.js

DEMO

Adds typewriter effect to HTML elements. Features:

• Uses requestAnimationFrame for better mobile performance.
• Paragraphs take up their "finished" space before typing. This means elements after paragraphs don't constantly reflow.
• Returns promises so you can chain paragraph animations.

Real-world examples

• http://apps.bostonglobe.com/spotlight/clash-in-the-name-of-care/story/

Install

npm install typewriter-js

Make sure you also reference typewriter.css.

Dependencies

• This module relies on Promise being available. You might want to use a polyfill to patch older browsers.

Usage

Create elements with class typewriter:

<p class='typewriter one'>Lorem ipsum dolor sit amet.</p>
<p class='typewriter two'>Ut enim ad minim veniam.</p>
<p class='typewriter three'>Excepteur sint occaecat cupidatat non proident.</p>

Require the library:

var typewriter = require('typewriter-js');

Prepare the elements:

typewriter.prepare('.typewriter');

Type away:

typewriter.type('.typewriter');

Or you could do the following, for greater control:

typewriter.type('.three')
    .then(function() {
        return typewriter.type('.two');
    });
    .then(function() {
        return typewriter.type('.one');
    });

Optionally pass in delay:

typewriter.type('.typewriter', {
    delay: 10 // milliseconds until next character
});

or duration:

typewriter.type('.typewriter', {
    duration: 1000 // milliseconds until all characters have been typed
});

You can also untype text. It works exactly like type:

typewriter.untype('.typewriter', {
  duration: 1000
});

NOTE 1: If both delay and duration are present, delay takes priority.

NOTE 2: At the moment you won't be able to type faster than your device's refresh rate. So duration is sort of broken.

Contributors

• Gabriel Florit
• Michael Shick

License

MIT © Gabriel Florit