Awesome
Play.js
Agnostic frame-skipping animation library
Performs an abstract transition for a fixed amount of time, regardless of the
frame rate of the page (frame skipping.) Calls an onFrame
callback with a
0-to-1 float ratio (representing the progress of the transition) as often as
the browser can perform.
// Run a transition for one second
Play.start({
time: 1,
onFrame: function(r) {
console.log('Animation is at ' + (r * 100).toFixed(2) + '%');
}
});
// A custom transition easing can be set using the "easing" option, otherwise
// it defaults to linear.
Play.start({
time: 0.1,
easing: function(r) {
// Similar to the default jQuery "swing" easing ($.easing.swing)
return 0.5 - Math.cos(r * Math.PI) / 2;
},
onFrame: function(r) {
// The first and last values will be closer, as the transition grows faster
// in middle
console.log(r);
}
});
// Starting an animation returns a reference to its instance, exposing a few
// API methods
var myAnimation = Play.start({time: 5});
// You can stop an animation at any time...
Play.stop(myAnimation);
// ...or end it. The difference being that this time the onFrame handler will
// also be called on last time, with maximum ratio (1), as if the entire time
// for that animation had passed
Play.end(myAnimation);
// Another thing you can do is start a transition from a specific point in its
// development. This animation will go from 0.5 to 1 ratio and will last 500ms
Play.start({time: 1, ratio: 0.5});
// The beauty of the onFrame handler lays in its simplicity. You can use the
// frame ratio in any way you'd like, from rendering a progress bar to all
// sorts af complex DOM transitions
Play.start({time: 5, function(r) {
$('.my-element').css({top: r / 2, left: r});
}});
// Play.js can also be installed as a npm package
var Play = require('play-js').Play;