SlimFady
Randomly delay revealing of each character in a text (uses CSS3 animation).
- Doesn't remove HTML tags of animated text
- No extra dependencies
codepen.io)
Demo (Getting started
npm install slimfady --save
JS
; const options = container: '#foo' delay: 50; const sf = options;
CSS
///////;
DOM
hello
API
Options
{
container: '#foo'
delay: 50
}
options.container
, string, required
CSS selector of a single DOM node.
options.delay
, number, optional, default = 20
Defines time range between starting animation of each character, smaller value => faster animation.
Methods
sf.startAnimation()
sf.stopAnimation()
Stops and also pauses animation if it's still in progress. If you would like to remove animation
and reveal the whole text immediately, use clearAnimation()
.
sf.isAnimating()
sf.clearAnimation()
Removes animation and reveals the whole text. It doesn't remove newly created <span>
elements.
After calling clearAnimation()
, you can easily start animation from the beginning by using
startAnimation()
.
License
MIT