SteppedEase sprite animation yoyo

[Sitnim]

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

[Carl]

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

 

 

 

 

[Sitnim]

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

 

[Sahil]

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

 

[Sahil]

And for responsiveness your spritesheet should be created vertically. Got idea from this pen, there is also link to tutorial from sitepoint.

 

See the Pen ddNZxd?editors=0110 by Sahil89 (@Sahil89) on CodePen