ScrollTrigger start position issue

[Animesh09]

Hey there folks! I just started exploring with GSAP in a new project and absolutely fell in love with the capabilities this library offers.It was going all good till i ran into a problem with the Scrolltrigger setup. So i am currently working on a nextjs single route project where the page is sectioned (components) in different parts and has navigation to scroll up and down on the page. I am using scrollTrigger to mark active nav based on which section is visible. There is one sections with two components (one Component for mobile view and the other for bigger screen) which is loaded based one screen size which is causing the problem, when initially the page loads it works fine but when resizing the window and mobile view component loads its scrollTrigger its Start position locks on top of the document even after refresh(). i tried my best to troubleshoot the problem in different ways. 

 

For other sections i used Scrolltrigger.matchMedia() to load different scrolltrigger position for different screen size and it works for other sections, this particular section is loaded conditionally and that's causing the glitch, and i'm not sure how to fix this.

 

Demo Link:

https://codesandbox.io/s/scrolltriger-navigation-to5kn?file=/src/App.js

 

[Cassie]

We recommend using useLayoutEffect for scrollTrigger as it helps to wait until the DOM is completely loaded before calculating positions.

refresh() should be what you're looking for - It forces the ScrollTrigger instance to re-calculate its start and end values. The trick is making sure you're not calling it before the DOM is properly loaded 

Have you given these articles a look?