🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL


Documentation

jquery.gsap.sprite

Sprite control plugin for jQuery & GSAP

Demo: http://jsbin.com/quvuzo/6/edit?html,js,output

Usage:

Include dependancies:

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> 

Init the plugin and start controlling it:

var mark = $(".mark").sprite({   frameWidth: 24,    frameHeight: 70,    sheetWidth: 120,   imageSrc:"https://dl.dropboxusercontent.com/u/6801572/marksprite.png" });   // Pause the sprite mark.sprite("pause");  // Play the sprite mark.sprite("play");  // Resume the sprite from where it was paused mark.sprite("resume");  // Restart the sprite from the beginning mark.sprite("restart");  // Stop the sprite mark.sprite("stop");  // Goto first frame (0 indexed) and stop mark.sprite("seek", 0, true);    // Goto thrid frame (0 indexed) and stop mark.sprite("seek", 2, true);  // Goto thrid frame (0 indexed) and continue mark.sprite("seek", 2, true);  

All Options:

Option Default Description
imageSrc null (optional) uses background-image css property otherwise
frameWidth 100 pixel width value of each frame as an integer ie. 100 not 100px
frameHeight 100 pixel height value of each frame as an integer ie. 100 not 100px
sheetWidth 1000 pixel width value of total sprite sheet as an integer ie. 1000 not 1000px
speed 0.150 animation speed in milliseconds
timeLine null (optional) Timeline object to use instead of internal variable.
TimelineMaxOverride null (optional) TimelineMax library, in case of customization
TweenMaxOverride null (optional) TweenMax library, in case of customization

You May Also Like