Jump to content
GreenSock

Michael71

Animating Sprite sheets.

Recommended Posts

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: fishSprite.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 8 months later...

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×