Sprites.js is simple canvas sprites animation library. No setTimeout() or setInterval(). Just rAF. 774 bytes gzipped. 1,56KB minified. Read docs on Github

Input image This image has no paddings. It contains 8 frames.

Sprite init var parrot = new Sprite({ src: 'img/papuga.png', id: 'canvas', width: 160, height: 156, image_width: 1280, err: true }); Note: Works only for one canvas.

.play(fps, from, to, n)

play //Play from 8th to 1st frame (backwards) 5 times. //Open console.log to see callback effects. parrot.play({ fps: 10, from: 8, to: 1, n: 5, step: function(e){ console.log('step:', e); }, loop: function(e){ console.log('loop:', e); } });

.pause()

loop pause parrot.pause();

.reset(5)

loop reset //reset to 5th frame parrot.reset(5);

.frame()

frame alert(parrot.frame());