Share Posted February 8, 2018 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 More sharing options...
Share Posted February 8, 2018 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 3 Link to comment Share on other sites More sharing options...
Author Share Posted February 8, 2018 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 More sharing options...
Share Posted February 8, 2018 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 1 Link to comment Share on other sites More sharing options...
Share Posted February 8, 2018 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now