Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
walltea

SteppedEase to animate a DOM sprite with rows?

Recommended Posts

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!

 

post-16890-0-74424300-1389205428_thumb.jpg

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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?

Link to post
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.

×