Bobby80 Posted December 9, 2021 Share Posted December 9, 2021 Hello. I'm a total newbie to GSAP, and was just wondering how I can make this animation play once on scroll down? See the Pen bGEqbaQ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted December 9, 2021 Share Posted December 9, 2021 Welcome to the forums, @Bobby80. The key is in your "toggleActions". Currently you have: toggleActions: "restart pause resume reverse", Which means "restart every time it enters, pause when it leaves, resume when it enters back onto the screen scrolling the opposite way, and reverse when it leaves the screen while scrolling the opposite way". See the ScrollTrigger docs to read more about toggleActions But if you just want it to play when it enters the screen, do this: toggleActions: "play none none none", Which is actually the default, so you could even remove the toggleActions completely and it'll do the same thing. Happy tweening! 2 Link to comment Share on other sites More sharing options...
Bobby80 Posted December 10, 2021 Author Share Posted December 10, 2021 @GreenSock Thank you! I'm still running into an issue on mobile though. It plays intermittently. Any idea as to why that may be happening? Appreciate your help. Link to comment Share on other sites More sharing options...
OSUblake Posted December 10, 2021 Share Posted December 10, 2021 What do you mean by it only plays intermittently? Just going on the demo you posted above, you probably shouldn't be recreating your ScrollTrigger on refresh. Every time the address bar moves in and out view, it will trigger a refresh because the size is being resized. ScrollTrigger.addEventListener("refresh", setupSplits); 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