Stickguy Posted August 21, 2020 Share Posted August 21, 2020 New to GSAP. I have been trying to learn more about ScrollTriggers and I'm running into a weird issue with toggleActions. My goal is for the animation to restart when it enters the viewport then pause when it leaves, restart when scrolled back into view, and finally pause when it leaves again (scrolled all the way back). I've tried several different toggleActions and I think I have the correct settings. Am I missing something or setting something up wrong? toggleActions: "restart pause restart pause" See the Pen bGpBjWv by Stickguy (@Stickguy) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 21, 2020 Share Posted August 21, 2020 Hey Stickguy and welcome to the GreenSock forums. toggleActions can't apply to tweens that you create inside of callback - they just apply to when the animation is attached to the ScrollTrigger itself. Your entire structure of code is a bit perplexing to me (maybe because this is a subset of your larger codebase). Why have a bunch of variables for defaults if you're just creating one tween per loop? I'd probably do something like this: window.Animate = function (element) { gsap.registerPlugin(ScrollTrigger); if (element.classList.contains("Animate_Fade_Holder")) { gsap.to(element.querySelectorAll(".Animate_Fade"), { opacity: 1, duration: 1.7, ease: "power2", stagger: 0.2, scrollTrigger: { trigger: element, markers: true, id: element.id, toggleActions: "restart pause restart pause", start: "top 50%", } }); } return; }; 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