uk_helene Posted March 1, 2023 Share Posted March 1, 2023 Hello, I try to make et vertical fullscreen slider on a website with GSAP ScrollTrigger and ScrollToPlugin, and I am experiencing problems. On desktop, everything works well but on mobile, the scroll is totally crazy. I based my slider on this codepen See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen and add dots manually to navigate in addition to the scroll. On mobile only, when I scroll down, the navigation goes down too low (1 slide too far) and then back up. Is it due to the fullscreen ? To the JS ? If anyone has an idea, I'm interested. I'm not very good with Javascript, so GSAP seems like a white elephant (i find this expression to translate french expression "usine à gaz", i'm not sure to correctly use it ^^). Thank you Hélène See the Pen GRXWoJw by uk_helene (@uk_helene) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted March 1, 2023 Share Posted March 1, 2023 Hi @uk_helene and welcome to the GreenSock forums! We're currently looking into this, sorry for the inconveniences 🙏 Please stand by. Happy Tweening! Link to comment Share on other sites More sharing options...
uk_helene Posted March 2, 2023 Author Share Posted March 2, 2023 Hi @Rodrigo, Thank you. I hope you'll find something to help me. Have a good day. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 3, 2023 Solution Share Posted March 3, 2023 How's this?: See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen Comments: position: sticky is terrible for performance and I would definitely not use it (at least in this context). Try it with and without and you'll probably notice a big difference. When you enable normalizeScroll(), it uses JS to do the scrolling, including the momentum/flick scrolling. It does the momentum stuff with an inertia-based tween, so in this case that was running AND the scrollTo tween was also running and they were conflicting. In the next release of ScrollTrigger (which is used in the demo above), I added code to sense when the scroll position is changed outside of the inertia tween and if it senses that, it'll stop the momentum tween. On touch devices, it's best to preventDefault() and stop propagation of the "touchstart" event if there's an in-progress scrollTo tween that has autoKill: false so that it doesn't interfere when the user attempts to touch-scroll. On touch devices, I think it's best to disable() and enable() the normalizeScroll() observer in an onStart, just so that if their finger is still on the screen and they try to touch-scroll, it doesn't allow it (until they release their touch) I hope that helps. 1 Link to comment Share on other sites More sharing options...
uk_helene Posted March 9, 2023 Author Share Posted March 9, 2023 Hi @GreenSock, This solution works perfectly ! Thank you very much. Now I have to improve myself 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