jQuery Plugin For Frame-By-Frame Sprites Animations - SpriteClip.js

SpriteClip.js is a jQuery plugin that provides a simple way to animate sprites for creating frame by frame animations, similar to the AS3's MovieClip.

You might also like:

• Spritely - Pure HTML & jQuery Background Animation Plugin
• jQuery Animating Sprites Plugin - animateSprite

Basic Usage:

1. Create an animated button using sprite

<a class="awesome-button"></a>

2. The CSS for the button

<style>
.awesome-button {
display: block;
width: 60px;
height: 60px;
background: url("img/rally-button.png") no-repeat 0 0;
margin-bottom: 1em;
border: 1px solid #ccc;
}
</style>

3. Include jQuery javascript library and jQuery spriteclip.js script on the web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="../dist/spriteclip.js"></script> 

4. The javascript

<script>

//Instantiate and get the instance from the element's data-spriteClip property
var instance = $(".awesome-button").spriteClip({
totalFrames: 30,
frameRate: 60,
stops: [1, 30]
}).data("spriteClip");

instance.$el
.on("mouseover", function () {
instance.play();
})
.on("mouseout", function () {
instance.rewind();
});
</script>

5. Methods

instance.play();
instance.stop();
instance.rewind();
instance.gotoAndPlay(5);
instance.gotoAndStop(3);
instance.gotoAndRewind(6);
instance.playtoAndStop(5);
instance.rewindtoAndStop(1);
instance.nextFrame();
instance.prevFrame();
instance.stops([4]);
instance.stops([4, 6]);
instance.stops([]);

More examples:

• Basic example
• API example

---

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