Animating Sprite sheets.

[Michael71]

Hello,

 

I was wondering if someone had any success of animating a set of images (known also as sprite sheets).

 

I was thinking that animating the css property background-position, and maybe adding some autoAlpha would do the trick.

 

I will probably try and implement something of sorts unless someone has already beaten me to it, so there is no need to re-invent the wheel...

 

looking forward for reading some ideas on the matter...

 

EDIT:

Something quick and dirty is the following:

var t1 = new TimelineMax({delay:0, repeat:-1, repeatDelay:0});

t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':posX}},0.1);
t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':(posX-50)}},0.2);
t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':(posX-100)}},0.3);
}

 

we have a

<div id="spriteContainer"></div>

and some css:

#spriteContainer{
background:url(fishSprite.png);
background-repeat:no-repeat;
position:absolute;
left:50%;
top:200px;
width:38px;
height:26px;
overflow:hidden;
}

 

I used this sprite sheet:

[GreenSock]

I haven't worked with animating sprite sheets yet, but I would expect that tweening the backgroundPosition should work. I would NOT, however, recommend using "background-position-x" like in your example because [if I remember correctly] Firefox (or one of the major browsers) doesn't recognize that particular property. But all major browsers seem to recognize the backgroundPosition property in which you define both the x and y positions with a space inbetween. CSSPlugin handles it just fine.

 

And you could set your timeline (or tween) to use frames instead of seconds if that's easier for you. useFrames:true (but if you do that, remember that your durations and your delays should all be defined in frames, not seconds). You might want to check out SteppedEase too if you want to move things in chunks/steps rather than smooth easing.

[Michael71]

Oh thats awesome piece of info, thanks I'll be sure to try them out.

[jeff4gee]

I have been experimenting with animating a sprite sheet in javascript using GSJS. Here is how I have set it up. First I make a image sequence. I started with a 24 frame rotation of a camera. I created a illustrator file 12 x the width of one image which was 300px and 2 x the height which was 300px. My final artboard was 3600 x 600px for this test. For this animation to work all the images have to be lined up in there cells. Below is an example of the final code and animation. Enjoy.

See the Pen dJliq by anon (@anon) on CodePen