GSAP breaks routing while using <Link> in NextJS

[rolandr]

Hi,

 

In my index.js file I have <sections> elements as components what I animate with ScrollTrigger.

 

useEffect(() => {
    const initHorizontal = (element) => {
      let horizontalContainer = document.querySelector(".sections__horizontal"),
        horizontalSections = gsap.utils.toArray(
          ".sections__horizontal-inner .sections"
        );

      gsap.to(horizontalSections, {
        xPercent: -100 * (horizontalSections.length - 1),
        ease: "none",
        scrollTrigger: {
          trigger: horizontalContainer,
          pin: true,
          start: (self) => self.previous().end,
          toggleClass: "active",
          scrub: 1,
          snap: {
            snapTo: 1 / (horizontalSections.length - 1),
            duration: 0.1,
            directional: true,
          },
          end: () =>
            "+=" +
            (horizontalSections.length - 1) * horizontalSections[0].offsetWidth,
        },
      });
    };

    let verticalSections = gsap.utils.toArray(".sections__vertical");
    verticalSections.forEach((element) => {
      gsap.from(element, {
        autoAlpha: 0.1,
        ease: "power2",
        scrollTrigger: {
          trigger: element,
          scrub: true,
          pin: true,
          start: "top top",
          end: "+=50%",
        },
      });

      if (element.classList.contains("sections__horizontal")) {
        initHorizontal(element);
      }
    });

    ScrollTrigger.create({
      trigger: "#drips",
      start: "top bottom",
      end: "bottom bottom",
      onLeave: () => {
        let a = document.getElementById("main__drips");
        let b = a.contentDocument;
        let c = b.getElementById("ez4PQKnIq5e1");
        c.dispatchEvent(new Event("click"));
      },
    });

    ScrollTrigger.create({
      trigger: "#shop",
      start: "top bottom",
      end: "bottom bottom",
      onLeave: () => {
        let a = document.getElementById("howto");
        let b = a.contentDocument;
        let c = b.getElementById("eTqvw3RfsKX1");
        c.dispatchEvent(new Event("click"));
      },
    });
    ScrollTrigger.create({
      trigger: "#footer",
      start: "top bottom",
      end: "bottom bottom",
      onLeave: () => {
        let a = document.getElementById("footer_dog");
        let b = a.contentDocument;
        let c = b.getElementById("eTgGSeZrQC21");
        c.dispatchEvent(new Event("click"));
      },
    });

    const activeSections = gsap.utils.toArray(".sections");
    activeSections.forEach((element) => {
      gsap.from(element, {
        scrollTrigger: {
          start: "top bottom",
          end: "bottom top",
          trigger: element,
          toggleClass: "section__inview",
        },
      });
    });
  }, []);

In my header component when I navigate to an other page with <Link> then I get the following error:
NotFoundError: Node.removeChild: The node to be removed is not a child of this node

In a topic I found a possible solution, but when I use it in the end of the useEffect then the animations stop to work:

 

ScrollTrigger.getAll().forEach((instance) => {
      instance.kill();
    });
    // This in case a scroll animation is active while the route is updated
    gsap.killTweensOf(window);  

 

I also tried to add it on the new page where I navigate too, but the error came up again. What is the real solution for this issue?

[elegantseagulls]

Honestly it's really difficult to debug this with out a codesandbox or similar.

You'll want to do your garbage cleanup in a return function at the end of your useEffect:

 

useEffect(() => {
    const tl = gsap.timeline()
    
	ScrollTrigger.create({
    	...
        id: 'mytrigger'
    })

    return () => {
        tl.kill();
        ScrollTrigger.getById('mytrigger').kill();
    }

}, [])