Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
eviljeff

ScrollTrigger pin throws error when navigating away in React/Frontity

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

Not sure, I can't get codesandbox to update my changes, so I can't test.

 

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

 

 

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 @OSUblake thank you for looking into this. You should be able to edit the codesandbox by clicking on Fork in the top right.

Link to comment
Share on other sites

Yeah, I did that, but it still doesn't update when I change the code. Save, refresh, open in new window... nothing changes. 🤷‍♂️

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...

For anyone else coming across this problem, the solution is to use useLayoutEffect as shown in this post.

 

 

 

Link to comment
Share on other sites

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.
×