pjtf93 Posted October 15, 2020 Share Posted October 15, 2020 Hello everyone, I'm new to gsap and i have been using ScrollTrigger for a few days trying to replicate the scroll effect on this website (https://katiforner.com/), i'm using this codepen as an example but i get a weird behavior because the scroll does not always work right, sometimes it scrolls directly to the last container and when i switch to another page the scroll does not let me go down the page. I'm using the last version of gsap 3.5.1 with NextJs. Here is a code sample from https://codesandbox.io/s/ecstatic-black-4fdkp?file=/src/App.js See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 15, 2020 Share Posted October 15, 2020 Hey pjtf93 and welcome to the GreenSock forums. This effect has been asked about a couple of times already. Perhaps these threads can help you out: Do you have any specific instructions for how to recreate the issue? OS or browser info? Steps to do on the page to break it? Link to comment Share on other sites More sharing options...
pjtf93 Posted October 15, 2020 Author Share Posted October 15, 2020 Thanks for your quick reply Zach, i read those post but i i don't know what's making my scroll fail, i tested on Chrome and Firefox on Windows 10. I setup another example here https://nextjstest-jf6ccnyrh.vercel.app/ if you scroll down and them you go up and click on hello it's going to send you to another page where you can't scroll down, but if you go back the scroll behaves weird. The code is still the same that on the codesandbox Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 15, 2020 Share Posted October 15, 2020 Ah, so the error is happening after you navigate away from a page and then go back to it. This is because you create ScrollTriggers that are never killed when the page is changed so the next time it comes back to a page there are multiple instances running. I'm not familiar enough with React to know what hook/syntax that requires. If you can't figure it out maybe @elegantseagulls or @Rodrigo can provide some input. Link to comment Share on other sites More sharing options...
pjtf93 Posted October 15, 2020 Author Share Posted October 15, 2020 Thanks Zach, i read about killing the instance but i'm not sure how to do that, maybe that's related to the other issue of the scroll going down to the last container. I'm going to play a bit and see if i go it working Link to comment Share on other sites More sharing options...
Rodrigo Posted October 16, 2020 Share Posted October 16, 2020 Hi, In order to kill GSAP instances you need to use the returned function from the initial render useEffect(), which you already have in place, this will run when the component is unmounted: useEffect(() => { /* ALL THE GSAP CODE HERE */ return () => { // In this function kill all your GSAP instances // that could be affecting other areas of your code // our throwing errors }; }, []); Finally your codesandbox is using Create React App and not Next, so is not the same environment as the live sample you provided and you're running the registerPlugin method twice, that's not necessary, you can run it once and pass all the plugins you need to register: gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); Happy Tweening!!! 2 Link to comment Share on other sites More sharing options...
pjtf93 Posted October 16, 2020 Author Share Posted October 16, 2020 Thanks very much Rodrigo, that solved the issue when navigating away to another page, but now i'm having another problem when i go back to the main page the scrollTrigger is not working, i tried putting the ref on the dependency of the useEffect but it did not work.Also, sometimes if i refresh at the bottom of the page the scroll jumps right to the first element instead of the last one, what can be causing that? Link to comment Share on other sites More sharing options...
Rodrigo Posted October 17, 2020 Share Posted October 17, 2020 To be completely honest I don't have a lot of experience with the ScrollTrigger plugin yet, so I can't tell you with just the information you provide. Please update your codesandbox to use Next and a minimal reproduction of your issue in order to get a better look at what could be causing the problems. Happy Tweening!!! Link to comment Share on other sites More sharing options...
eviljeff Posted April 12, 2021 Share Posted April 12, 2021 Hi @Rodrigo I hope you'll be able to help me with my scrolltrigger/react issue. The issue happens with the pinning functionality only. The pin works fine but when I navigate to another page (in the below example is the About page) I get an 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 parameter I don't get the error anymore. Here is a codesandbox that replicates the issue. https://codesandbox.io/s/falling-sunset-iytl0?file=/packages/mars-theme/src/components/verticalSlider.js Are you able to figure out what is wrong with my code? Thank you!! 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. 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