jQuery + GSAP + Sprite Plugin

[drewbit 15 Likes (Newbie)]

I had a need for controlling a sprite-sheet, with pause, play, and go-to-frame functionality. Also needed practice creating jQuery plugins.

 

The result is jquery.gsap.sprite.js. 

 

Gitub: https://github.com/agrothe/jquery.gsap.sprite

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

 

Sample Usage:

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);

A few advanced features are overrides for TweenMax and TimelineMax libraries, as well as passing in your own Timeline object for maximum control.

 

Comments and suggestions more than welcome.

See the Pen edit?html,js,output by quvuzo (@quvuzo) on CodePen

[GreenSock 8,117 Likes (Superhero)]

Very cool, drewbit! Thanks for sharing.