Jump to content
Search Community

SteppedEase to animate a DOM sprite with rows?

walltea test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 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.
×
×
  • Create New...