ScrollTrigger fullpage sections: section change on resize

[CityLights 4 Likes (Newbie)]

Reproduction steps:

1. Open the official demo attached in a new window

2. Scroll to the orange section saying "TWO"
2. Resize the window a significant amount

After the resize and refresh complete, ScrollTrigger will snap to a section different than the one prior to the resize.

What's an elegant way to fix this?

 

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

[ZachSaucier 7,048 Likes (Superhero)]

Hey CityLights and welcome to the GreenSock forums.

 

To fix this you'll need to record which section is snapped to each time that it snaps. Then on refresh you should set the scroll position to the value it needs to be to have that section at the top of the viewport.

[CityLights 4 Likes (Newbie)]

On 12/11/2020 at 2:33 PM, ZachSaucier said:

Hey CityLights and welcome to the GreenSock forums.

 

To fix this you'll need to record which section is snapped to each time that it snaps. Then on refresh you should set the scroll position to the value it needs to be to have that section at the top of the viewport.

Thanks for the simple scenario-specific solution which leverages the snapping sections. How would you go about this if there was no snapping behavior and the user could stop their scroll position at intermediate points between the sections?

[ZachSaucier 7,048 Likes (Superhero)]

11 minutes ago, CityLights said:

How would you go about this if there was no snapping behavior and the user could stop their scroll position at intermediate points between the sections?

You could use the progress of the ScrollTrigger to do similar calculations.