Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sitnim

SteppedEase sprite animation yoyo

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 post
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)

 

BfMPOsk.png

 

 

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

×