Jump to content


SteppedEase sprite animation yoyo

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 am making a png spritesheet animation. I have an animation existing of 7 frames which I want to animate back-and-forth. 
So: from frame 1 to frame 7 back to frame 1 again and back. Example: 1,2,3,4,5,6,7,6,5,4,3,2,1,2,3 etc.
I tried reversing with "yoyo:true" but i cant quite get a seamless experience as you can see from the Codepen. The animation goes back to frame 1 before getting into yoyo. I would love some advice from you.


Any advice would be appreciated!

See the Pen gvgWMr by Dreejt (@Dreejt) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demo. It looks like your image isn't loading over https. try http in your css.


By just looking at your spritesheet (below) I really can't easily assess how the animation is supposed to appear so its kind of impossible to know the frame boundaries or what frame is being shown at any time (which makes debugging difficult)





However, I had an old demo laying around that does what you ask 1,2,3,4,5,6,5,4,3,2,1. 



See the Pen wygrzg?editors=0010 by GreenSock (@GreenSock) on CodePen





  • Like 3
Link to comment
Share on other sites

Thank you Carl!
I edited my first CodePen and did it like your example.  I made it 6 steps in stead of 7, and edited the backgroundPosition to 4380px (5110 - 730).

It works smooth like this. However I want to use percentages to be able to make everything scalable. 

See the Pen aqpVLN by Dreejt (@Dreejt) on CodePen


Link to comment
Share on other sites

I think to use percentage, you need to animate background position to 100%, though like Carl said it is really hard to predict whatever is happening is correct or not.


See the Pen rJjpej by Sahil89 (@Sahil89) on CodePen


  • Like 1
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.