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: