SteppedEase to animate a DOM sprite with rows?

[walltea 0 Likes (Newbie)]

Hi there,

 

I was wondering if there was a way to used SteppedEase to animate a DOM element with a background image as a sprite where the background image has multiple rows of frames.

 

See attachment for example.

 

Ideally for the attached example I'd like it to animate row 1 from frames 1-4, then row 2 from frames 1-4, then reset and repeat.

 

Is this possible with SteppedEase? If so can someone point me in the right direction?

 

Thanks!

 

[cezaleo 10 Likes (Newbie)]

something like this?

See the Pen wdfEt by ccelestine (@ccelestine) on CodePen

[walltea 0 Likes (Newbie)]

Unfortunately that's with one row of sprites (all frames are in a single linear progression). You can alternatively do that with a syntax like: 

var frameWidth = 22, numCols = 16;
var steppedEase = new SteppedEase(numCols);

TweenMax.to('selector', 1, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase, repeat:-1});

My problem arises for sprite sheets with multiple rows, like the one originally attached. I need a way to animate frames 1-4 from row 1, then step to row 2 and animate frames 1-4, then loop.

[cezaleo 10 Likes (Newbie)]

Would it be possible to edit the png and put them all on one row?

[walltea 0 Likes (Newbie)]

Yeah, I guess that would be the easiest route.

 

I would then just use the code from above:

function animateSmoke() {
	var frameWidth = 22, numCols = 16 * 6;
	var steppedEase = new SteppedEase(numCols);

	TweenMax.to('.smoke', 1, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase, repeat:-1});
}

My next question would be then, how would I start the animation on a random frame and continue through the loop?