animated-typing
v1.0.1
Published
Text typing animation functionalities
Downloads
3
Readme
animated-typing module
Text typing animation functionalities.
@usage
import AnimatedTyping from './animated-typing';
// uses default render function
const b = new AnimatedTyping('skying', {speed: 100}).animate();
// uses custom render function
const a = new AnimatedTyping('windsurfing', {speed: 400}, function(text, animationFrameCount, fullText, config) {
document.querySelector('.my-dom-element-class').innerHTML = text;
}).animate();
@exports
AnimatedTyping class
@properties
this.text {String}
The full text to be animated
this.config {Object}
Animation config
Format
.speed {Number}
this.animatedText {String}
The text being animated (contains N chars of this.text, where N is the number of the animation frames handled by setInterval)
this.animation {setInterval ref}
The setInterval instance handling the animation running
this.animationFrameCount {Number}
The animation frames count
Range
[0, this.text.length - 1]
this.render {Function}
The animated text rendering function
@public methods
animate()
Starts the text typing animation.
The animation simulates a user writing the text, one char after the other, at this.config.speed intervals.
The animation is accomplished by calling the this.config.render(text, fullText, config) function at this.config.speed time intervals.
The default render function just logs the text typing animation to the console.
@customize
Behaviour can be customized by the module consumer, through this.config and this.render properties