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