React Router problem with Scrolltrigger

[Huzaifa727]

Hi I am having a problem using ScrollTrigger with React Router. I have two pages in my website Home and About. The animation on homepage works perfectly but when I navigate to About page I get this error.

"Node.removeChild: The node to be removed is not a child of this node"

If I visit About Page by direct url without using router then the Animation on About page works fine but If I navigate to Home page from About page then the same error happens again. I am new to Scrolltrigger and also react and I've been trying to solve this for days but I couldn't find any solution on the internet. That's why I posted here. Anyway below is the url to the StackBlitz code of my project.
https://stackblitz.com/edit/stackblitz-starters-bldghh

[Rodrigo]

Hi @Huzaifa727 and welcome to the GreenSock forums!

 

I couldn't really tell you where is your problem without dissecting throw your code, but there must be some issue in the way you're setting up React Router.

 

As you can see this example works as expected:

https://stackblitz.com/edit/vitejs-vite-d73sck

 

So this definitely is not something related with GSAP. Unfortunately I don't have time right now to go through your setup and find the issue, so hopefully the example above shed some light on your demo and setup so you can fix the issue.

 

Happy Tweening!

[GreenSock]

My guess is that it might have to do with the fact that ScrollTrigger has to inject a pin-spacer <div> around the element that's being pinned and React is complaining. To solve that, you can just use your own wrapper element instead, and feed it in as the pinSpacer: 

https://stackblitz.com/edit/stackblitz-starters-myr23m?file=src%2Fcomponents%2Fhome.js,src%2Fcomponents%2Fabout.js

 

That way, nothing is getting added/removed during refreshes - all the DOM structure stays the same.

 

Does that resolve things? 

[Huzaifa727]

@Rodrigo I did something similar to your solution. In my Home and About components I had multiple elements that's why I was using React Fragments (<> </>) to wrap them. Instead of this I wrapped my elements into a <main> element and it is working now. Thanks a lot Sir!

[Rodrigo]

Hi,

 

That's great and also confirms what Jack hinted in his post.

 

Thanks for sharing the solution with the community! 💚

 

Happy Tweening!