Jump to content
Search Community

ScrollTrigger pin throws error when navigating away in React/Frontity

eviljeff test
Moderator Tag

Recommended Posts

Hi there,

 

I have an issue with the ScrollTrigger pin functionality on a React (Frontity) project.

 

The pin works fine but when I navigate to another page I get a major error

 

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

 

If I comment out the pin functionality I don't get the error anymore.

 

Here is a sandbox that replicates the issue.

 

https://codesandbox.io/s/falling-sunset-iytl0?file=/packages/mars-theme/src/components/verticalSlider.js

 

Does anyone have any idea why that is happening?

 

Many thanks,

Jeff

Link to comment
Share on other sites

6 minutes ago, OSUblake said:

@GreenSock when killing a pinned scrolltrigger, does it try to remove an element?

 

It has to remove the pin-spacer element, yes, and reparent things back to the original way they were. I'm traveling, so I can't dig into this right now, but I wonder if maybe you're calling kill() at the wrong lifecycle place in such a way that React has already removed things from the DOM? Totally guessing. 

Link to comment
Share on other sites

Hi guys,

 

I'm sorry if I cannot be of any further help with the codesandbox editing issue. I can start a live session which allows participant to edit the code.

 

If that's not possible, do you have a rough idea by looking at the code what could be wrong? I've hit a brick wall with it. I really hope you can help.

 

Thank you

Link to comment
Share on other sites

Hi,

 

Sorry this slipped through the cracks.

 

Honestly I don't know what to tell you. I whipped a quick sample using Next and GSAP and it seems to be working as expected:

https://codesandbox.io/s/vibrant-cerf-d16uv?file=/pages/index.js

 

Perhaps the issue resides in the usage of styled components or another package in your setup, but that's beyond what we can do around here. Try removing styled components and use either regular classes or styles declarations using objects (like I did in the sample), if CSS in JS is a must in the project.

 

Hopefully this helps.

 

Happy Tweening!!!

  • Like 1
Link to comment
Share on other sites

Hi @Rodrigo

 

Thanks for your reply!

 

I have tried removing the styled components and used styles declarations using objects but unfortunately that didn't solved the issue.

 

Do you have any idea what kind of package could be causing conflicts? I know this goes out of scope, but would you be so kind to let me know if there is a way to debug package conflicts?

 

Thank you so much!!

Link to comment
Share on other sites

Honestly I don't know. There are quite a few differences between the set up you posted and the one I came up with. Also I've never worked with a headless CMS in a React or Vue environments, that is using any framework based on them (Gatsby, Next, Nuxt, etc), so I have no experience with them.

 

If I was you I would start with a barebone NextJS app with GSAP and ScrollTrigger. Then I'd start adding things up until it breaks, then you'll have the culprit. This sounds like a drag and in someway it is, but I don't see another way around it.

 

Perhaps @elegantseagulls or @Shrug ¯\_(ツ)_/¯ have some experience with the stack you're using in your app and could chime in into this.

 

Sorry I can't be more helpful.

 

Happy Tweening!!!

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...