rolandr Posted October 27, 2021 Share Posted October 27, 2021 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? Link to comment Share on other sites More sharing options...
elegantseagulls Posted October 27, 2021 Share Posted October 27, 2021 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(); } }, []) 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