toggleActions not working as expected

[Stickguy]

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

[ZachSaucier]

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