Easy Sprite Animation JavaScript Library – sprite.js

sprite.js is a simple, fast JavaScript library for creating performant GIF-style animations with using background sprites.

Basic usage:

Just include the sprite.js file right before the </body> tag and we’re ready to go.

<script src="sprite.js"></script>

The html.

<div id="demo">
</div>

Add your sprite image as a background into the container you created.

#demo {
  background: url("sprite.png") no-repeat 0 -10px;
  ...
}

Animate the background sprites.

var myAnimation = new AM.Sprite(document.getElementById('demo'), {
    totalFrames: 14,
    columns: 5,
    rows: 3
});
myAnimation.element.onclick = function () {
  if (myAnimation.running) {
    myAnimation.pause();
  } else {
    myAnimation.loopBetween(myAnimation.currentFrame, 0, true);
  }
};
  
myAnimation.loopBetween(1, 7, true);

You can find more demos in the ‘example’ folder.