eviljeff Posted April 8, 2021 Share Posted April 8, 2021 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 More sharing options...
OSUblake Posted April 8, 2021 Share Posted April 8, 2021 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 More sharing options...
GreenSock Posted April 8, 2021 Share Posted April 8, 2021 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 More sharing options...
eviljeff Posted April 8, 2021 Author Share Posted April 8, 2021 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 More sharing options...
OSUblake Posted April 8, 2021 Share Posted April 8, 2021 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 More sharing options...
eviljeff Posted April 9, 2021 Author Share Posted April 9, 2021 Oh sorry, are you able to update it from this link after signing in? https://codesandbox.io/live/ht7buy4. Thank you Link to comment Share on other sites More sharing options...
eviljeff Posted April 12, 2021 Author Share Posted April 12, 2021 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 More sharing options...
Rodrigo Posted April 12, 2021 Share Posted April 12, 2021 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!!! 1 Link to comment Share on other sites More sharing options...
eviljeff Posted April 12, 2021 Author Share Posted April 12, 2021 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 More sharing options...
Rodrigo Posted April 12, 2021 Share Posted April 12, 2021 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!!! 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 3, 2021 Share Posted June 3, 2021 For anyone else coming across this problem, the solution is to use useLayoutEffect as shown in this post. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now