Jump to content
GreenSock

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

Scrolltrigger issue with react

Recommended Posts

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

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

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

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

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

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

  • Like 2
Link to comment
Share on other sites

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

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

  • 5 months later...

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

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