typewriter.js
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
- This module relies on
Promise
being available. You might want to use a polyfill to patch older browsers.
Usage
Create elements with class typewriter
:
Lorem ipsum dolor sit amet.Ut enim ad minim veniam.Excepteur sint occaecat cupidatat non proident.
Require the library:
var typewriter = ;
Prepare the elements:
typewriter;
Type away:
typewritertype'.typewriter';
Or you could do the following, for greater control:
typewritertype'.three';;
Optionally pass in delay:
typewritertype'.typewriter'delay: 10 // milliseconds until next character;
or duration:
typewritertype'.typewriter'duration: 1000 // milliseconds until all characters have been typed;
You can also untype text. It works exactly like type:
typewriter;
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