Dallah Posted May 22, 2022 Share Posted May 22, 2022 Hi, I have an issue with the locomotive scroll and scroll trigger pin, but it's only happening on mobile. This issue can also be seen on the scrollProxy doc example in codepen Somehow, the moment the scroll enters the pin section and the scroll speed is too fast, there will be a flash of white space that only appears for a few milliseconds. As seen in this video. Sometimes the section event gets detached and stacked on top of the other section White space: 00:05 00:24. Section detached: 00:42Thanks for your help and for this amazing product! * Recorded on Android See the Pen zYrELYe by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
thehaes Posted May 22, 2022 Share Posted May 22, 2022 I think it's related to how mobile safari on iOS works, when you scroll up or down, sometimes the browser adress bar or bottom nav bar dissapears/appears which is resizing the browser, meaning the positions are being recalculated. That's why you see the flash, because the content is moving. I hope I explained that right. You should try using gsap scroll smoother (has the same options like locomotive scroll) and also try normalizeScroll(). If this doesn't work, then there's another option using css and 2 lines of js, but it will force the browser to always display navbar and adress bar and also you won't be able to scroll to top by tapping top edge of the screen like you normally do. 3 Link to comment Share on other sites More sharing options...
Dallah Posted May 23, 2022 Author Share Posted May 23, 2022 (edited) Thanks, @thehaes for replying, but as we can see in the video, it's recorded on android and the address bar stays still, not hiding and showing. Edited May 23, 2022 by Dallah missing `android` Link to comment Share on other sites More sharing options...
GreenSock Posted May 23, 2022 Share Posted May 23, 2022 Yep, that's due to the fact that the browser is handling scroll repainting on a DIFFERENT THREAD than the main JS one. So when you scroll quickly to a spot beyond where the pinning starts/ends, the browser is repainting the page as if it scrolled past but then a few milliseconds later the main thread executes and ScrollTrigger says "HEY! Pin that element" (but the browser had already repainted beyond that spot). As far as I know, LocomotiveScroll basically turns itself off on mobile/touch devices. You could try calling ScrollTrigger.normalizeScroll(true) and see if that helps because it basically forces scrolling to be done on the main thread. Another solution is to use ScrollSmoother instead of LocomotiveScroll 2 Link to comment Share on other sites More sharing options...
Dallah Posted May 23, 2022 Author Share Posted May 23, 2022 Thanks @GreenSock for the explanation. I added the normalizeScroll() here. But it seems the issue is still there. See the Pen YzexaGy by afdallah (@afdallah) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted May 23, 2022 Share Posted May 23, 2022 Sorry, to activate it, you need to pass in true (or a config object): ScrollTrigger.normalizeScroll(true); Link to comment Share on other sites More sharing options...
Dallah Posted May 23, 2022 Author Share Posted May 23, 2022 Oh, I thought the default value is `true`. sorry. I have updated the codepen, unfortunately, the issue is still there Link to comment Share on other sites More sharing options...
GreenSock Posted May 23, 2022 Share Posted May 23, 2022 I'm having a tough time seeing it, but I'd strongly recommend trying ScrollSmoother instead of LocomotiveScroll. You can try it on CodePen for free as much as you want using this special URL (which won't work properly on other domains): https://assets.codepen.io/16327/ScrollSmoother.min.js More info: https://greensock.com/docs/v3/Plugins/ScrollSmoother Link to comment Share on other sites More sharing options...
Dallah Posted May 23, 2022 Author Share Posted May 23, 2022 Yeah, ScrollSmoother is really promising but currently, I only need it for a small side project. anyway, I really appreciate the time you spent answering the questions in this forum. Thanks! 1 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