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