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

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

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

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