Jump to content
GreenSock

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

ReactJS, ScrollTrigger, ScrollToPlugin - react-router-dom issue

Recommended Posts

Hi all!

Long time lurker here. So far by using the search function I could find a solution to any problem i've faced! - until now.

I started learning React and I'm having the following issue:

The main site "/" uses ScrollTrigger and ScrollTo in conjuction to jump from section to section. This works great and without any issues until i switch to another "page" and head back to "/". Scrolling down sometimes suddenly breaks and the ScrollTrigger function for scrolling up breaks completely.

Also scrolling on /partner seems to get sluggish and stops for a second, then resumes

 

Here is the link to codesandbox to illustrate my issue:

https://codesandbox.io/s/52g0s

 

I've had to take out a lot of unnecassary code and might have missed some parts - please excuse the mess!

 

I've found the following resources which led me to take different approaches but the issue still persisted:

1. https://greensock.com/forums/topic/21393-scrollto-plugin-with-react-js-does-not-working/

2. https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/

3. https://greensock.com/forums/topic/24733-gsap-reactjs-and-scrolltrigger/

4. https://greensock.com/forums/topic/25893-scrolltrigger-issue-with-react/

5. https://greensock.com/forums/topic/25526-react-passing-array-of-refs-to-timeline/

6. https://greensock.com/forums/topic/23582-animating-multiple-react-components-with-the-same-animation/

(Sidenote to #6: By using useRef() I've hade the same issue as OP and putting my sections in an array like @OSUblake suggested, didn't seem to work - I'm also not sure if this is the correct approach for my issue)

 

I'm greatful for any advice! Thank you in advance for your help

Edited by NovumLorem
Grammar
Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

The problem is that the ScrollTrigger instances that you created are still listening to the scroll event in the window object. When you navigate to another route these instances still exists (actually if you scroll up/down in the /partner route, you can see that the scroll is completely messed up). Then you navigate back to the home route and a completely new set of ScrollTrigger instances is created yet again, which make things even more complicated. What you have to do is kill the existing ScrollTrigger instances when the component is unmounted and then it works as expected. Just add this to the end of the useEffect() hook in the Home.js component:

 

return () => {
  ScrollTrigger.getAll().forEach((instance) => {
    instance.kill();
  });
  // This in case a scroll animation is active while the route is updated
  gsap.killTweensOf(window);
};

As a recommendation, don't use regular query selectors if you can avoid it. Also store your GSAP instances in variables or in an object (whatever works better for you) in order to make it easier to clean up your component when is unmounted.

 

https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup

 

Happy Tweening!!!

  • Like 3
  • Thanks 1
Link to post
Share on other sites

Hi Rodrigo

Thank you very much for welcoming me and for the detailed explanation!

Indeed this was the issue. I saw with console.log that after a route change the running ScrollTrigger instances doubled, trippled etc. I've tried to kill the animation with ScrollTrigger.kill(); but I saw in another post that this literaly kills everything.

Anyway the issue is resolved and everything runs buttery-smooth :)

 

1 hour ago, Rodrigo said:

As a recommendation, don't use regular query selectors

Do you mean that I should use useRef()? 

 

Thank you so much for your help!! 

  • Like 1
Link to post
Share on other sites
3 minutes ago, NovumLorem said:

Do you mean that I should use useRef()? 

Yeah. If you're 100% completely positive that your DOM nodes are mounted when you use the selector, is OK to use them, although not the recommended approach (AKA The React Way). Also for example if you want to kill a GSAP instance for a specific DOM element, you already have it stored in an object that doesn't change unless you do it directly, which avoids writing and running the code for the selector once again.

 

Happy Tweening!!!

  • Like 2
Link to post
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.

×