Romanus Posted February 10, 2023 Share Posted February 10, 2023 I have a looped animation. I want it to play only when the user sees it. How to do it? If I have a lot of animations that run in the background, I think this will have a bad effect on performance. I think this can be done using scrollTrigger, but I do not understand how exactly See the Pen yLqmOoW by romanusname (@romanusname) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted February 10, 2023 Share Posted February 10, 2023 Hi, Thanks for the super simple codepen example! In the case of that particular example just use toggleActions: gsap.to('.box',{ x:200, yoyo:true , repeat: -1, ease: "none", duration:2, scrollTrigger: { trigger:'.box', markers:true, toggleActions: "play pause play pause", } }) From ScrollTrigger docs: toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". Let us know how it works. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Romanus Posted February 11, 2023 Author Share Posted February 11, 2023 8 hours ago, Rodrigo said: Hi, Thanks for the super simple codepen example! In the case of that particular example just use toggleActions: gsap.to('.box',{ x:200, yoyo:true , repeat: -1, ease: "none", duration:2, scrollTrigger: { trigger:'.box', markers:true, toggleActions: "play pause play pause", } }) From ScrollTrigger docs: toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". Let us know how it works. Happy Tweening! Thank you! This works great. But I got a little problem. If the section is "pin", the markers leave, but the element remains. Because of this, the element stops earlier than I expect. Can this be fixed somehow? See the Pen XWBvMPO by romanusname (@romanusname) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted February 11, 2023 Share Posted February 11, 2023 Hi, In that case you can use the callbacks from the ScrollTrigger that is pinning the section. See the Pen WNKVYrq by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 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