Scrolling quickly down the page on mobile resets the pinned elements

[amacondray]

I have a site in development that has a scrollTrigger on the hero. Everything is working fine until you scroll quickly to the bottom of the page on mobile.

 

The pinned elements get reset once you hit the bottom of the page. I can't figure out what is causing this behavior. Any help is appreciated.

 

https://dev.carlilemacy.com/

 

     

[GreenSock]

It's very likely because the mobile browser is changing the window size by showing/hiding the address bar which triggers a ScrollTrigger.refresh() (when the scrolling is done so as to avoid interrupting the momentum scrolling). You can skip that by changing the autoRefreshEvents list in .config() (remove resize) but of course that means you risk the start/end values for all you ScrollTriggers being incorrect. In other words, there's a fundamental logic issue at play here - if your window resizes that likely changes the size of other elements and the position of the scrollbar where things should be triggered, thus ScrollTrigger.refresh() must do its work to recalculate things. 

 

There's a hint in the helper functions to prevent the window from resizing (though that's a tradeoff UX-wise of course): https://greensock.com/docs/v3/HelperFunctions#scrollResize

[amacondray]

Thanks for the quick reply! I tried the CSS fix and for some reason it stopped some parts for the page from scrolling. I ended up only loading the scroll feature on desktop. It felt like the best solution for now.