I’m sorry for bombarding with help requests but I am stuck with another issue.
I am using gsap ScrollTrigger in one of the components. The ScrollTrigger simply pins an element at the top.
That works fine until I navigate to another page, where I get this error
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Are you by any chance familiar with this error?
I am killing the gsap animation when the component unmounts and that seems to be working fine. The issue comes only if I pin the element, not happening with any other gsap animation.
I have asked on the gsap forum about this and they have no idea why I am getting this error. They think it could be a conflict with the styled components or with a package in the application.
I have tried with removing the styled components and used inline styling but that didn’t solve the problem.
Do you have an idea as of why I could be getting that error? Could there be a package that you think could go in conflict with gsap?
Someone else was having the same issue with an app in Gatsby and they have figured out that it was indeed a package, this is what they said
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.
Here is a codesandbox that shows the issue
Thank you so much.