typewriter-js

2.0.0 • Public • Published

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

Install

npm install typewriter-js

Make sure you also reference typewriter.css.

Dependencies

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

License

MIT © Gabriel Florit

Readme

Keywords

none

Package Sidebar

Install

npm i typewriter-js

Weekly Downloads

33

Version

2.0.0

License

MIT

Last publish

Collaborators

  • gabrielflorit