Animation Play Once

[Bobby80]

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

[GreenSock]

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!

[Bobby80]

@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.

[OSUblake]

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);