bultano Posted December 18, 2023 Share Posted December 18, 2023 NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. I have made this GSAP animation in react which works really well, when i try to navigate to another i get this error: I have wrapped all of the gsap inside of a context and then reverted on return but still get this issue Thanks J 1 Link to comment Share on other sites More sharing options...
GSAP Helper Posted December 18, 2023 Share Posted December 18, 2023 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen Using a framework/library like React, Vue, Next, etc.? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: React (please read this article!) Next Svelte Sveltekit Vue Nuxt Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
Rodrigo Posted December 18, 2023 Share Posted December 18, 2023 Hi, Direct DOM manipulation in React is not always recommended, because at some point the component could re-render and based on the current state the element that was manually removed will be rendered again, regardless of the logic you employed to remove the element. Is better and safer to use the traditional conditional rendering approach in these type of frameworks (not just React). Finally I recommend you to take a look at the resources in this page to learn more about the integration of GSAP in React projects: https://gsap.com/resources/React Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
bultano Posted December 18, 2023 Author Share Posted December 18, 2023 Hi Here is a code sandbox showing my issue: https://codesandbox.io/p/devbox/compassionate-forest-h32yk9?file=%2Fapp%2Fdashboard%2Fpage.js&embed=1&layout=%7B%22sidebarPanel%22%3A%22EXPLORER%22%2C%22rootPanelGroup%22%3A%7B%22direction%22%3A%22horizontal%22%2C%22contentType%22%3A%22UNKNOWN%22%2C%22type%22%3A%22PANEL_GROUP%22%2C%22id%22%3A%22ROOT_LAYOUT%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22UNKNOWN%22%2C%22direction%22%3A%22vertical%22%2C%22id%22%3A%22clqax7nsc0007356hu9g3hxk5%22%2C%22sizes%22%3A%5B62.02988792%2C37.97011208%5D%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22EDITOR%22%2C%22direction%22%3A%22horizontal%22%2C%22id%22%3A%22EDITOR%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22EDITOR%22%2C%22id%22%3A%22clqax7nsc0002356hns0bs7zd%22%7D%5D%7D%2C%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22SHELLS%22%2C%22direction%22%3A%22horizontal%22%2C%22id%22%3A%22SHELLS%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22SHELLS%22%2C%22id%22%3A%22clqax7nsc0004356hos5fyiro%22%7D%5D%2C%22sizes%22%3A%5B100%5D%7D%5D%7D%2C%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22DEVTOOLS%22%2C%22direction%22%3A%22vertical%22%2C%22id%22%3A%22DEVTOOLS%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22DEVTOOLS%22%2C%22id%22%3A%22clqax7nsc0006356hizpvjxc4%22%7D%5D%2C%22sizes%22%3A%5B100%5D%7D%5D%2C%22sizes%22%3A%5B40%2C60%5D%7D%2C%22tabbedPanels%22%3A%7B%22clqax7nsc0002356hns0bs7zd%22%3A%7B%22tabs%22%3A%5B%7B%22id%22%3A%22clqax7nsb0001356hzyk7t7u2%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22FILE%22%2C%22filepath%22%3A%22%2FREADME.md%22%2C%22state%22%3A%22IDLE%22%7D%2C%7B%22id%22%3A%22clqb4rt110002356hsiasclqi%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22FILE%22%2C%22initialSelections%22%3A%5B%7B%22startLineNumber%22%3A148%2C%22startColumn%22%3A59%2C%22endLineNumber%22%3A148%2C%22endColumn%22%3A59%7D%5D%2C%22filepath%22%3A%22%2Fapp%2Fdashboard%2Fpage.js%22%2C%22state%22%3A%22IDLE%22%7D%5D%2C%22id%22%3A%22clqax7nsc0002356hns0bs7zd%22%2C%22activeTabId%22%3A%22clqb4rt110002356hsiasclqi%22%7D%2C%22clqax7nsc0006356hizpvjxc4%22%3A%7B%22id%22%3A%22clqax7nsc0006356hizpvjxc4%22%2C%22tabs%22%3A%5B%7B%22id%22%3A%22clqax7nsc0005356h3p3adho6%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TASK_PORT%22%2C%22taskId%22%3A%22dev%22%2C%22port%22%3A3000%2C%22path%22%3A%22%2Fdashboard%22%7D%5D%2C%22activeTabId%22%3A%22clqax7nsc0005356h3p3adho6%22%7D%2C%22clqax7nsc0004356hos5fyiro%22%3A%7B%22id%22%3A%22clqax7nsc0004356hos5fyiro%22%2C%22activeTabId%22%3A%22clqb4v2ix008g356h45ch87vx%22%2C%22tabs%22%3A%5B%7B%22id%22%3A%22clqax7nsc0003356hw12v2gqi%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TASK_LOG%22%2C%22taskId%22%3A%22dev%22%7D%2C%7B%22id%22%3A%22clqb4v2ix008g356h45ch87vx%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TERMINAL%22%2C%22shellId%22%3A%22clqb4v2lz008xeffm1mgp3lke%22%7D%5D%7D%7D%2C%22showDevtools%22%3Atrue%2C%22showShells%22%3Atrue%2C%22showSidebar%22%3Atrue%2C%22sidebarPanelSize%22%3A15%7D If you scroll to the bottom, it'll trigger the animation, if you then scroll to the top and press 'test' which takes you to the test page, you'll receive the node remove child issue, if you navigate to the /test page without being on the dashboard page, it works fine. Something in that useEffect is causing an issue and im not sure what Let me know Thanks Jake Link to comment Share on other sites More sharing options...
Rodrigo Posted December 18, 2023 Share Posted December 18, 2023 Hi, This seems more related to the fact that you're using a react fragment rather than a GSAP related problem. Adding this (or any other valid DOM node) to wrap your elements makes it work as expected: <main> <Link href="/test">test</Link> <div className="fullPageSection yellow white"> <div className="video"> <div className="canvas-container"> <canvas id="hero-lightpass" /> </div> </div> <div className="cta_section"> <h2 className="w-[65%] text-center block mx-auto leading-[1.5] font-normal "> test{" "} </h2> </div> </div> <div style={{ height: 100 + "vh" }} className="fullPageSection white" ></div> </main> Hopefully this helps. Happy Tweening! 1 1 Link to comment Share on other sites More sharing options...
bultano Posted December 18, 2023 Author Share Posted December 18, 2023 Wow, I am speechless haha - may I ask how you found the solution to this? or was it just something you have come across before? It didn't provide me with any decent error log Link to comment Share on other sites More sharing options...
Rodrigo Posted December 18, 2023 Share Posted December 18, 2023 Yep, sometimes error logs are cryptic and not really useful, not just a React thing. The issue is that everything in your code was good, you were using GSAP Context and reverting it appropriately in the cleanup phase, so it had to do with something on the DOM. React fragments can be useful in certain situations but I try to avoid using it as much as possible because of errors like this. When working on a SaaS project a few years ago I had my personal encounter with this error and it took my several hours to get to the problem. So my next try on your demo was to remove that and see how it works. If possible move your links to a container that is placed in the layout file, it saves you from re-rendering them everytime. If the links should go on every page, then avoid using fragments. Clearly there is a problem when a node is being removed after the cleanup phase (most likely the next link component, which is causing this, but I can't tell you for sure. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
bultano Posted December 19, 2023 Author Share Posted December 19, 2023 One last thing from me, is there any way to smooth out the scroll between the frames? I am using the club membership ScrollSmoother which scrolls a few extra frames at the beginning at end but its a bit rigid, i just want it to be as smooth as possible between the frames Link to comment Share on other sites More sharing options...
Rodrigo Posted December 19, 2023 Share Posted December 19, 2023 Hi, I don't see anything related to ScrollSmoother in the demo you posted, so there is not a lot we can do in that case. You can fork this simple demo: https://stackblitz.com/edit/react-iqmjfx Or this that uses React Router: https://stackblitz.com/edit/stackblitz-starters-9xvpi2 Finally I can't think of a reason that would cause the behaviour you describe, that's why we'll need a minimal demo that clearly illustrates the issue. Happy Tweening! Link to comment Share on other sites More sharing options...
bultano Posted December 19, 2023 Author Share Posted December 19, 2023 Here is the sandbox with scrollSmoother added, you can see it does move the frames slightly but it is a bit rigid: https://codesandbox.io/p/devbox/compassionate-forest-h32yk9?layout=%7B%22sidebarPanel%22%3A%22EXPLORER%22%2C%22rootPanelGroup%22%3A%7B%22direction%22%3A%22horizontal%22%2C%22contentType%22%3A%22UNKNOWN%22%2C%22type%22%3A%22PANEL_GROUP%22%2C%22id%22%3A%22ROOT_LAYOUT%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22UNKNOWN%22%2C%22direction%22%3A%22vertical%22%2C%22id%22%3A%22clqax7nsc0007356hu9g3hxk5%22%2C%22sizes%22%3A%5B62.02988792%2C37.97011208%5D%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22EDITOR%22%2C%22direction%22%3A%22horizontal%22%2C%22id%22%3A%22EDITOR%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22EDITOR%22%2C%22id%22%3A%22clqax7nsc0002356hns0bs7zd%22%7D%5D%7D%2C%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22SHELLS%22%2C%22direction%22%3A%22horizontal%22%2C%22id%22%3A%22SHELLS%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22SHELLS%22%2C%22id%22%3A%22clqax7nsc0004356hos5fyiro%22%7D%5D%2C%22sizes%22%3A%5B100%5D%7D%5D%7D%2C%7B%22type%22%3A%22PANEL_GROUP%22%2C%22contentType%22%3A%22DEVTOOLS%22%2C%22direction%22%3A%22vertical%22%2C%22id%22%3A%22DEVTOOLS%22%2C%22panels%22%3A%5B%7B%22type%22%3A%22PANEL%22%2C%22contentType%22%3A%22DEVTOOLS%22%2C%22id%22%3A%22clqax7nsc0006356hizpvjxc4%22%7D%5D%2C%22sizes%22%3A%5B100%5D%7D%5D%2C%22sizes%22%3A%5B40%2C60%5D%7D%2C%22tabbedPanels%22%3A%7B%22clqax7nsc0002356hns0bs7zd%22%3A%7B%22tabs%22%3A%5B%7B%22id%22%3A%22clqax7nsb0001356hzyk7t7u2%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22FILE%22%2C%22filepath%22%3A%22%2FREADME.md%22%2C%22state%22%3A%22IDLE%22%7D%2C%7B%22id%22%3A%22clqb4rt110002356hsiasclqi%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22FILE%22%2C%22initialSelections%22%3A%5B%7B%22startLineNumber%22%3A148%2C%22startColumn%22%3A59%2C%22endLineNumber%22%3A148%2C%22endColumn%22%3A59%7D%5D%2C%22filepath%22%3A%22%2Fapp%2Fdashboard%2Fpage.js%22%2C%22state%22%3A%22IDLE%22%7D%5D%2C%22id%22%3A%22clqax7nsc0002356hns0bs7zd%22%2C%22activeTabId%22%3A%22clqb4rt110002356hsiasclqi%22%7D%2C%22clqax7nsc0006356hizpvjxc4%22%3A%7B%22id%22%3A%22clqax7nsc0006356hizpvjxc4%22%2C%22tabs%22%3A%5B%7B%22id%22%3A%22clqax7nsc0005356h3p3adho6%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TASK_PORT%22%2C%22taskId%22%3A%22dev%22%2C%22port%22%3A3000%2C%22path%22%3A%22%2Fdashboard%22%7D%5D%2C%22activeTabId%22%3A%22clqax7nsc0005356h3p3adho6%22%7D%2C%22clqax7nsc0004356hos5fyiro%22%3A%7B%22id%22%3A%22clqax7nsc0004356hos5fyiro%22%2C%22tabs%22%3A%5B%7B%22id%22%3A%22clqax7nsc0003356hw12v2gqi%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TASK_LOG%22%2C%22taskId%22%3A%22dev%22%7D%2C%7B%22id%22%3A%22clqb4v2ix008g356h45ch87vx%22%2C%22mode%22%3A%22permanent%22%2C%22type%22%3A%22TERMINAL%22%2C%22shellId%22%3A%22clqb4v2lz008xeffm1mgp3lke%22%7D%5D%2C%22activeTabId%22%3A%22clqb4v2ix008g356h45ch87vx%22%7D%7D%2C%22showDevtools%22%3Atrue%2C%22showShells%22%3Atrue%2C%22showSidebar%22%3Atrue%2C%22sidebarPanelSize%22%3A15%7D Link to comment Share on other sites More sharing options...
Rodrigo Posted December 19, 2023 Share Posted December 19, 2023 Hi, I'm not seeing anything rigid in the demo, everything seems to work as it should from my point of view. The only thing is that you should create your ScrollSmoother instance inside the GSAP Context instance or use our new useGSAP hook as shown in this demo: https://stackblitz.com/edit/stackblitz-starters-cxedmc?file=app%2Flayout.tsx useLayoutEffect(() => { const ctx = gsap.context(() => { ScrollSmoother.create({ smooth: 2, effects: true, }); }); return () => ctx.revert(); }, []); Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
bultano Posted December 19, 2023 Author Share Posted December 19, 2023 Hi It is just when you scroll slowly, it seems like it is lagging when we both know that is just slowly progressing through the frames Thanks I will ensure to add this context change Link to comment Share on other sites More sharing options...
Rodrigo Posted December 19, 2023 Share Posted December 19, 2023 Mhh, maybe try a smaller smooth value in your ScrollSmoother config: ScrollSmoother.create({ smooth: 0.75, effects: true, }); Another option is to add will-change: transform to the smooth-content element: #smooth-content { will-change: transform; } Hopefully this helps. Happy Tweening! 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