NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

bultano · December 18, 2023

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

GSAP Helper · 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:

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.

Rodrigo · 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!

bultano · December 18, 2023

Hi

Here is a code sandbox showing my issue:

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

Rodrigo · 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!

bultano · 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

Rodrigo · 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!

bultano · 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

Rodrigo · 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!

bultano · December 19, 2023

Rodrigo · 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!

bultano · 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

Rodrigo · 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!

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members