Scroll Trigger breaking using React Router

[ReactiveGuy]

I'm building a landing page using React Router that has a scrolling menu. Based on the position of the scrolling menu, the background elements change. Everything works, until I navigate to a different page, and receive Uncaught TypeError: Cannot read property 'classList' of null. When I return to the landing page, the ScrollTrigger is broken until the site is refreshed. I know this is due to the component unmounting and ScrollTrigger not being able to find the elements triggering onLeave and onLeaveBack. I tried using useLocation() to make sure ScrollTrigger instantiate when the the pathname = "/" and otherwise kill() the trigger, but it didn't solve the issue.

 

So the question is, how do I navigate away from my landing page without having my ScrollTrigger break and require a full refresh?

 

Here is the structure of my ScrollTrigger:

const pages = ["radio", "shop", "music", "about", "news"];
    useEffect(() => {
        const backgroundSquare = document.querySelector(".home-menu-background");
        pages.forEach((page) => {
            gsap.to(`#home-menu-item-${page}`, {
                scrollTrigger: {
                    trigger: `#home-menu-item-${page}`,
                    start: "top center",
                    end: "bottom center",
                    onEnter: () => {
                        backgroundSquare.style.backgroundImage = `url("${backgroundImages[page]}")`;
                        document.querySelector(`#home-menu-item-${page}`).classList.add("active");
                    },
                    onEnterBack: () => {
                        backgroundSquare.style.backgroundImage = `url("${backgroundImages[page]}")`;
                        document.querySelector(`#home-menu-item-${page}`).classList.add("active");
                    },
                    onLeave: () => {
                        document.querySelector(`#home-menu-item-${page}`).classList.remove("active");
                    },
                    onLeaveBack: () => {
                        document.querySelector(`#home-menu-item-${page}`).classList.remove("active");
                    },
                },
            });
        });
    });

[ZachSaucier]

Hey ReactiveGuy and welcome to the GreenSock forums. 

 

You should definitely kill off the ScrollTrigger when the component unmounts. You're much more likely to get a helpful response if you create a minimal demo of your situation using something like CodeSandbox.

[Rodrigo]

Hi,

 

The useEffect() hook can return a function that is executed when the component is unmounted (something React Router does for you), in that function you have to kill your ScrollTrigger instances in order to prevent that type of issues, something like this:

useEffect(() => {
  // All your code here
  return () => {
    // Cleanup here, kill your ScrollTrigger instances here
  };
}, []);

I don't have a live sample to show right now. I'll try to make something simple during the weekend. Hopefully this will be enough to get you started right now.

 

Happy Tweening!!!