Search code examples
reactjsanimationgsapscrollmagic

Scrollmagic setPin Method Causes Link issues in Create-react-app

I'm using Scrollmagic and GSAP in my create-react-app and pinning a section while child elements are animated on scroll. I've achieved this HOWEVER anytime I click on my nav links (using Reach Router) it goes to an empty/white page.

When inspecting elements in Chrome, the <div id="root"></div> is not fed any data which explains the empty/white page. If I refresh that page, it renders all content as expected. Additionally, it will also render if I comment out .setPin('#scrollStarts') line.

The empty/white page also throws the following errors:

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

Has anyone experiencing similar behavior and able to find solution?

Solution

  • I added a parent/wrapping <div> and it solved the issue.