Share Posted February 7 Hi, working on a scroll-based PNG sequence and I need to optimize the asset a bit. The raw asset plays forward then reverse. I'd like to cut the amount of frames in half and just reverse the asset on my own. Any idea on how to do that within the scroll movement? See the Pen VwrZgoq by dcha (@dcha) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted February 7 Or if it makes more sense, I'd like to replicate the asset above by cutting it in half and looping it within the scroll movement. The asset of 442 frames is for illustration of final product I'd like to land on. It should end up 221 frames obviously 😅 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted February 7 Hi, Â I'm not sure I follow you correctly. Right now it seems that the card is rotating in both directions as you scroll up/down which seems to be included in the sprites for the animation. Maybe I'm missing something obvious here, sorry. Â In terms of GSAP what you can do is set the repeat amount to 1 and yoyo to true: gsap.to(phone, { frame: frameCount - 1, snap: "frame", repeat: 1, yoyo: true, scrollTrigger: { scrub: 0.75 }, onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate }); Based on the response you added to the thread it seems that the repeat/yoyo approach might be what you're looking for. Â Let us know how it works and if you keep having issues. Happy Tweening! Link to comment Share on other sites More sharing options...
Author Share Posted February 7 Exactly it, thank you 1 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