FrankRuiz

Thanks for your responses guys. I did add a cleanup/Scrolltrigger.kill() to my useEffect but it did not fix the issue. What does seems to have worked is adding a Scrolltrigger.refresh() in that useEffect. Not sure how that will impact performance though. useEffect(() => { gsap.registerPlugin(ScrollTrigger); const target = targetElement.current; animation(target); ScrollTrigger.refresh(); }, [animation]);

Hello, I've setup the following 'Reveal' component to use on my current project (GatsbyJS) and found that when navigating to a new page after scrolling to the next one, the next page does not start a the top. It basically sets up a ScrollTrigger on a given target element and can be passed an animation prop for different animations. import React, { useRef, useLayoutEffect } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); const ns = `reveal`; const Reveal = ({ children, animation }) => { // target const targetElement = useRef(); useLayoutEffect(() => { const target = targetElement.current; animation(target); }, [animation]); return ( <div ref={targetElement} className={`${ ns }`}> {children} </div> ); }; Reveal.defaultProps = { // Set the defalut reveal functionality here, custom reveals // can be passed to Reveal using the callback prop animation: target => { // setting 'from' / initial styles here gsap.set(target, { y: 50, opacity: 0, transition: 'all 150ms linear', }); gsap.to(target, { // ScrollTrigger settings see link below for all options // https://greensock.com/docs/v3/Plugins/ScrollTrigger scrollTrigger: { start: 'top+=100 bottom', trigger: target, toggleActions: 'play none none reset', }, // setting 'to' / revealed styles here y: 0, opacity: 1, duration: 0.15, transition: 'all 150ms linear', }); }, }; export default Reveal; Anyone have any ideas as to why this behavior is happening? I am thinking I need to kill the ST instances when the component unmounts/page changes. Adding ScrollTrigger.refresh(true) on the page change (layout component) did not make a difference.

@eviljeff hmm not sure, it should be removing that ScrollTrigger instance, maybe try just hard coding a string ID and not using a random one. Logging this will show you all the accumulated ST instance - ScrollTrigger.getAll( )

@eviljeff In your useEffect try just adding a check const pinnedRefEl = pinnedRef.current; if (!pinnedRefEl) return; // rest of your animation code

Hey @eviljeff My issue seems to have been different than yours. However, I think what you are getting is because you aren't cleaning up/killing the ScrollTrigger correctly in your useEffect. In my code I assign an id to the ScrollTrigger instance and then kill it like so: useEffect(() => { if (titleEl.current) { gsap.to(titleEl.current, { x: -titleEl.current.offsetWidth * 0.5, ease: 'none', scrollTrigger: { id: `${ ns }-title`, trigger: titleEl.current, start: 'top bottom', end: 'bottom top', scrub: 0.25, }, }); } return () => { // clean up ScrollTrigger instance on title element const titleElTrigger = ScrollTrigger.getById(`${ ns }-title`); if (titleElTrigger) { titleElTrigger.kill(); } }; }, []);

Hello, Thought I would post on here in case anyone has any good references on how I could recreate something similar to the section starting with 'Real Estate' on this example website: https://videinfra.com/ I am planning to use ScrollTrigger and pinning the overall section. Then translating the images and text based on different triggers. Just need some examples of how to translate the images in a similar way. If someone has a sample Codepen or other reference they could share I would really appreciate it.

Thank you for your time guys, it ended up being due to a package that was being used on the component for unique ids that seemed to be mixing up the node references. This had been previously been used as the 'key' prop on the node list. ?

Thanks for your reply guys, here is some more context. Here's a (seemingly) working example of what we're doing. demo page: '/pages/hero-ex-page.js' component: '/components/hero.js' This code is from our actual project and just stripped down. What we're trying to understand lies in that this very implementation will break when the component is used on a specific page, but not on others. Specifically, when 'pin: true' is set. I know that's vague and difficult to help troubleshoot and that's completely understandable. If anyone has any insight into experiencing the 'NotFoundErrror: Failed to Execute 'removeChild' on 'Node': The node to be removed is not a child of this node.' when using GSAP in general, that would also help. And/or if there's anything within the implementation in the '/components/hero.js' component that raises any flags. *we know this may be a react specific question https://codesandbox.io/s/agitated-waterfall-8g3ep?file=/src/components/hero.js

Hello, I am experiencing this error: 'NotFoundErrror: Failed to Execute 'removeChild' on 'Node': The node to be removed is not a child of this node.' Specifically when using the 'pinning' attribute. Here is the code snippet being used in my component causing the error: useEffect(() => { panelRefs.current.forEach((panelRef, index) => { // GSAPs default 'end' value. let endValue = 'bottom top'; // Unpin the last item right away so it doesn't cover the non-hero content below it. // Still apply scrollTrigger to it so it will 'layer' over the prev image. if (index === panelRefs.current.length - 1) endValue = 'top top'; ScrollTrigger.create({ trigger: panelRef, scrub: true, start: 'top top', end: endValue, markers: true, pin: true, // BREAKS pinSpacing: false, }); }); }); Thank you in advance

Hello, Here are some requirements for the page I need to build: - Must scroll horizontally, so using mouse wheel and arrows would scroll the page horizontally. - Content sections would have different widths based on the content in each section (so not 100vw as I have seen from the ScrollTrigger examples, also have noticed that the width of the container is set to the total width of the content sections. So 6 sections would equate to 600% width set via the css). - Each section will have different parallax/animations upon entering the viewport. - There will be a navigation with scroll to anchor links. - This will be desktop only use case, so I do not have to consider mobile views. I have looked into ScrollTrigger and ScrollMagic and as noted above have seen that the widths of the content are 100vw. So is there a way to have differing content widths if I go this route? I also came across this repo: https://github.com/oberonamsterdam/horizontal So with this background being defined, my question to anyone with any experience building a page/site with horizontal scroll is what method has worked well for you? I am planning on using Gatsby.js and gsap regardless but am more so asking if ScrollTrigger horizontal is viable solution or is there something else better to us for this part? Thank you in advance for your feedback, Frank.