Not getting how to calculate exact snap position.

[Bhavin]

 
hey this is my codepen and i am not getting snap to positions i am adding resizing and requestanimationframe logic to tackle browser hiding and showing addressbar in mobile devices (because with normalizescroll its not perfect is IOS).

and because i am resizing my divs in scroll-container thats why i am counting end position by offestHeight and scrolltrigger.refresh on resize. (but i am not getting about snap to positions)

See the Pen GgKXWXr by Bhavin-Raut (@Bhavin-Raut) on CodePen.

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen ogvPebR by GreenSock (@GreenSock) on CodePen.

 

Also your codepen was loading two different versions of GSAP (not really a good idea) and both very old ones. Your version of ScrollTrigger was also quite old. Get the habit of always using the latest ones.

 

Hopefully this helps

Happy Tweening!

[Bhavin]

Thanks @Rodrigo its nice but still it won't work because when my address hides or shows my section height will resize and due to it my layout will shift upward or downward so my next section thinks i scroll and then my next section will pin to 0. 

[Rodrigo]

Use ignoreMobileResize

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config()

 

[Bhavin]

@Rodrigo IgnoremMobileResize ignore only for automatic resize refresh. But i am doing manual refresh also by code after changing my section height on resize.

[Rodrigo]

If you're changing the height of the elements then you have to refresh the ScrollTrigger instances, I see no other way around it. After the refresh is complete ScrollTrigger will update the instances depending on the scroll position and if you want to snap at the start/end of each section that is exactly where it will go based on the scroll position and the height of the elements and the viewport height as well.

 

Another option could be the clearScrollMemory method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

If this is not working, create a demo that clearly illustrates the issue and describe the way to reproduce the problem. Also present a debug URL for the codepen demo so we can test directly on real devices and not our desktop browsers.

[Bhavin]

Thank yo so much @Rodrigo still i didn't tested on all devices but its working fine. if there is problem i will debug it and upload debug url to feed once again thank you for help.