Easy Sprite Animation JavaScript Library – sprite.js

Category: Animation , Javascript | April 21, 2016
Views Total:2,367 views
Official Page:Go to website
Last Update:April 21, 2016


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">

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) {
  } else {
    myAnimation.loopBetween(myAnimation.currentFrame, 0, true);
myAnimation.loopBetween(1, 7, true);

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

You Might Be Interested In:

Leave a Reply