SteppedEase to animate sprite with columns and rows

[glassbean]

I am using stepped ease to animate a sprite and it works fine.

The problem i have is that there are so many frames that strip is now too wide and I need to have a grid of rows and columns of images

Is there a way of animating the y position incrementally as well the x position using the following:

 

TL.to(spriteSheet, 4, {x:-(spriteWidth * spriteNoOfFrames),ease:SteppedEase.config(spriteNoOfFrames)},"f1+=2.5" );

 

Thanks in advance... I really would love to use stepped ease since its so slimline compared with other js sprite animation code.

[Carl]

For a grid you will most likely have to loop through each row and create a new SteppedEase tween and increment the y value OR just use a set() to put the background where you need it.

 

Here is one we had laying around:

 

See the Pen NqWqzQ?editors=001 by GreenSock (@GreenSock) on CodePen

 

and another from sesamechee

 

See the Pen pyqWBp?editors=0010 by sesamechee (@sesamechee) on CodePen

 

 

 

 

[OSUblake]

Tip of the day.

Changing the background position triggers a paint. x and y don't.

 

 

See the Pen LJjpoo by osublake (@osublake) on CodePen

 

[glassbean]

Thank you all!

[RemoSenser]

Carl, I also used your example with the grid, but how can you add play and pause button to this. Additionally I wand the animation to wait till the image is loaded in case of large images

[ZachSaucier]

Hey @RemoSenser and welcome to the GreenSock forums.

 

3 hours ago, RemoSenser said:

how can you add play and pause button to this

The animation is attached to a timeline so you simply need to call the appropriate control methods inside of the event listeners on the elements that you want. 

 

3 hours ago, RemoSenser said:

Additionally I wand the animation to wait till the image is loaded in case of large images

Use the image's load event listener to set things up or start the animation then  

 

I think you'd learn a lot from my article about animating efficiently. Note that we also highly recommend using GSAP 3 and GSAP 3 syntax if you're not already. Upgrading is easy!