Lamonier Posted January 10, 2023 Share Posted January 10, 2023 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! Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted January 10, 2023 Solution Share Posted January 10, 2023 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! 2 Link to comment Share on other sites More sharing options...
Lamonier Posted January 10, 2023 Author Share Posted January 10, 2023 Thank you so much @Rodrigo. It worked perfectly! It also helped with visual glitches that happened every now and then. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now