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?





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...