Jump to content
GreenSock

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

ScrollTrigger start position issue

Recommended Posts

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

 

Link to comment
Share on other sites

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?

 

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