jQuery Animating Sprites Plugin - animateSprite

File Size: 42.3 KB
Views Total: 2614
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Animating Sprites Plugin - animateSprite

animateSprite is a funny jQuery plugin that makes it easy to create animating sprites in a block element.

You might also like:

Basic Usage:

1. Include jQuery library and animateSprite.js on your page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.animateSprite.js"></script>

2. Define a block element with width, height and background image

<div class="demo" style="width:400px; height:300px; background-image:url(demo.jpg)"></div>

3. Call the plugin with options

columns: 10, // The number of columns the sprite sheet has, default 10
totalFrames: 20, // Number of frames the animation has
duration: 2000, // Time to complete the animation, in milliseconds
loop: true, // If the animation has to loop
complete: function(){
    alert("Sprite animation complete!"); // Called after the animation has finished (not called if is loop)

4. Methods to control the animation

$("object").animateSprite("stopAnimation")      // stops the animation
$("object").animateSprite("resumeAnimation")    // continues the animation from the point where it was stopped
$("object").animateSprite("restartAnimation")   // starts the animation from the beginning
$("object").animateSprite("showFrame", n)       // displays the frame number "n"

Change Log:


  • Fix image cache problem on IE7/8.


  • Swhicthing animations now restart frame counter


  • Added autoplay: false to prevent the animation from playing from the start


  • Restart animation if it's called again


  • Added support for bower. You can install now the plugin using bower install animatesprite. 
  • Fixed a leak when removing the DOM element, and added a new method to change FPS.


  • Fixed a problem setting the speed of the animation
  • Added a new feature so you can specify a set of animations


  • Demo page and features update.

This awesome jQuery plugin is developed by blaiprat. For more Advanced Usages, please check the demo page or visit the official website.