ScrollTrigger pinning and mobile

[Lamonier]

First of all, you people from GreenSock are simply out of this world. GSAP made me fall in love with front end again. Thank you very much!

 

My question is not about a specific edge case, it's a little bit generic. I remade my portfolio (https://lucaslamonier.com/) with GSAP and went crazy with it. The page ended up being a bunch of experiments of random techniques and visuals. Just like I intended 😉

 

A couple of sections were pinned with ScrollTrigger. The whole section which had a height of 100vh. It works nice on desktop, but there is an issue on mobile that sometimes can hinder UX. At least on Chrome, when the user scrolls up the URL bar appears, which changes the viewport height and causes everything to re-calculate and sometimes makes the scroll position to change.

 

This is particularly problematic on a section that shows a side-by-side comparison of different images, where part of the experience is scrolling up and down. Shout out to the codepen of the before/after images.

 

What I am after is some advice for best practices when pinning whole sections and/or maybe some resources on that. I work with React and considered making completely different components for mobile that have animations that are not pinning-related.

 

Thanks in advance!

[Rodrigo]

Hi @Lamonier welcome to the GreenSock forums and thanks for the kind words!

 

First of congratulations on a really great job on your portfolio, it looks really good!

 

For the issue at hand you can try ScrollTrigger's normalizeScroll method:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Hopefully this helps. If you keep having issues let know and remember to include a minimal demo in order to better assist you.

 

Happy Tweening!

[Lamonier]

Thank you so much @Rodrigo. It worked perfectly! It also helped with visual glitches that happened every now and then.