Introduction
Zoetrope provides a clean API for defining basic javascript animations using requestAnimationFrame. It should be very familiar if you have ever used jQuery.animate()
progress events. But Zeotrope is dependency free, has a small file size (less than 2KB gzipped) and is much more performant.
It doesn't come with any animations out of the box, it's just a tiny helper so you can say:
Do x every frame for x seconds with x easing
If you are looking for a full animation framework i recommend Anime.js or GSAP
Browser Support
If requestAnimationFrame
isn't available, Zoetrope will polyfill rAF using setTimeout(). Using the implimentation by Paul Irish
IE / Edge |
Firefox |
Chrome |
Safari |
---|---|---|---|
IE9+ | ✓ | ✓ | ✓ |
Installation
Using npm
$ npm install zoetrope --save
Using Yarn
$ yarn add zoetrope
Example
// Animating DOM elements, but this could easily be a canvas animation.let $container = documentlet $leftCircle = documentlet $rightCircle = document // Lots of nice easings can be found in this thread: https://gist.github.com/gre/1650294let { return t < 05 ? 4 * t * t * t : t - 1 * 2 * t - 2 * 2 * t - 2 + 1 } // Define what our animation should do each tick, all we need is the current progress.let { // translation let percentage = progress * 300 // rotation let rotation = 360 * progress $leftCirclestyletransform = `translateX(%) rotate(deg)` $rightCirclestyletransform = `translateX(-%) rotate(deg)` $containerstyletransform = `translate(-50%, -50%) rotate(deg)`} // Define our animation.let animation = duration: 3500 onTick: spin { console } easing: easeInOutCubic // Add extra event listeners.animation // Start the animation looping, with a 500ms delay inbetween each loopanimation
Setup
let anim =
API
play
Start the animation
anim
reverse
Start the animation in reverse
anim
pause
Pause the animation but keep the RAF running so it can be resumed.
anim
resume
Resume the animation if it was paused, otherwise it does nothing.
anim
stop
Stop the animation, cannot be resumed as it destroys the current instance of RAF.
anim
loop(delay)
Loop the animation forwards then backwards with an optional delay inbetween.
// Play the animation forwards, wait 200ms then play it backwards and repeat forever.anim
duration(duration)
Set the duration of the animation in ms.
// On creationanim = duration: 5000 // Or lateranim
easing(easingFunc)
Set a function to determine easing for the animation, if this is not called the animation will just use easeOutQuint easing.
// Define your own, only accepts one value of current time// More available here: https://gist.github.com/gre/1650294let { return t*t*t } // On creationanim = easing: easeInCubic // Or lateranim
debug
Log a shallow copy of the current state
let anim = duration: 300 anim // logs: {duration: 300, easing: easeOutQuart, ...} // logs: {duration: 2000, easing: easeOutQuart, ...}
Events
'start'
Fired on the first frame of the animation
'tick'
Fired on each RAF update of the animation.
Returns: progress - Eased value between 0 - 1
'complete'
Fired when the animation has finished running.
License
Zoetrope is open-sourced software licensed under the MIT license.