Jump to content
GreenSock

glassbean

SteppedEase to animate sprite with columns and rows

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

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.

Link to comment
Share on other sites

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

 

 

 

 

  • Like 3
Link to comment
Share on other sites

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

 

  • Like 4
Link to comment
Share on other sites

  • 2 years later...

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

Link to comment
Share on other sites

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!

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