cool-typewriter
Install
$ npm install --save-dev cool-typewriter
Description
A lightweight es6
class that simulates typewriter-effects.
Features
- Can handle any nested DOM structure
- Doesn't mess around with CSS or classes - leaves styling up to you
Usage
; let typewriter = ;typerwriter typedocument start;
API
Instantiate a new typewriter:
let typewriter = ;
Each typewriter can type independently from other typewriters. If you need to animate multiple elements simultaneously, use multiple typewriters.
.type(element)
Define an element to be typed out. The element - including all its descendants - will be typed out.
Can be called multiple times; each element will be queued up and typed out in order when .start()
is called.
typewriter typeelementA typeelementB;
.start()
Starts typing all the elements added via type()
.
.stop()
Immediately stops typing and clears the queue. Any elements not typed out are lost forever!
.complete()
Instantly complete any typing animations.
.pause()
Pause the typewriter
.resume()
Resume typing after being paused
CSS classes
Sometimes, you may want to style an element as it's being typed. Cool-typewriter provides two classes that you can use for this
cool-typewriter-typing
This class is added to an element as it's being typed and removed once it's done. You could use this to add a caret to simulate typing.
cool-typewriter-empty
This class is added to all elements as they are hidden and removed once an element is being typed. This may be useful to hide elements prior to typing.