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?

This is exactly what I tried to achieve. Thank you for your time, really appreciate it. I'll read the whole documentation again to know more about the library!

Hello, I'm trying to use the examples from the website to achieve the same animation but with other elements (header, footer) around, and between them. I modified the CSS, so the panels are not fixed, and also changed the container. I'm sure the problem is that I don't understand how these animations work, and seems difficult for the first try. Can you guys give me some guidelines or an existing example what should I look for? Thank you! Structure what I would like to achieve: <header> <animation slide 1 | slide 2 | slide 3> <content without animation> <animation slide 4 | slide 5 | slide 6> <footer>