Milk0 Posted May 4, 2022 Share Posted May 4, 2022 Hello everyone! I'm working on a project where i had the chance to use ScrollSmoother combined with ScrollTrigger. On desktop everything works wonderfully and even on mobile but only if it is an Android one. Seems like that ScrollSmoother on iOS mobile devices makes the stuff in the pinned section "glitching" / moving up and down while scrolling on them. I tried to apply normalize scroll and anticipate pin, and it got better but the glitch still remains. I assume is something i'm missing with scrollSmoother settings cause if i disable it on touch devices everything goes well. From the demo you can test it out if you have an iPhone. You'll notice the glitch at all by scrolling slower in the middle(red) section. I'd like to understand if my settings are incorrect for scrollSmoother and pinning effect or if the right way to solve this is to completely disable the plugin on touch devices. Thanks in advance to everyone that will try to help! See the Pen poaJVdb by ElMilko (@ElMilko) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted May 4, 2022 Share Posted May 4, 2022 Try setting normalizeScroll: true on your ScrollSmoother's config object. There are known bugs in iOS Safari (the browser, not GSAP) that cause it to misreport scroll values intermittently (but VERY often, like on every other requestAnimationFrame while scrolling). Super annoying, right? Apple knows about it but hasn't fixed it. I believe it was reported years ago. Anyway, we put a ton of effort into the normalizeScroll feature to make it work around those browser issues. Link to comment Share on other sites More sharing options...
OSUblake Posted May 4, 2022 Share Posted May 4, 2022 And you should also get rid of those nested ScrollTriggers. Check out the section about nesting ScrollTriggers here... 2 Link to comment Share on other sites More sharing options...
Milk0 Posted May 5, 2022 Author Share Posted May 5, 2022 12 hours ago, GreenSock said: Try setting normalizeScroll: true on your ScrollSmoother's config object. Thanks Jack @GreenSock but i've already done it on the demo because i read about iOS issues , and it improved the navigation a bit. But unfortunetly didn't solved the problem.. Other operations i may do? 12 hours ago, OSUblake said: And you should also get rid of those nested ScrollTriggers. Check out the section about nesting ScrollTriggers here... @OSUblake i've created the demo fast and i didn't put the right attention on nesting, you right. Tipically i do nest ScrollTrigger only if i want a specific item to start the animation in a different point of the viewport.. i hope that doesn't still a bad habit! 😂 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 5, 2022 Share Posted May 5, 2022 42 minutes ago, Milk0 said: Tipically i do nest ScrollTrigger only if i want a specific item to start the animation in a different point of the viewport.. i hope that doesn't still a bad habit! 😂 You certainly shouldn't ever nest ScrollTriggers - it's not just a bad habit that we advise against - it's not valid code. It will break your animations. Give that bit of the article a read! 3 Link to comment Share on other sites More sharing options...
Milk0 Posted May 5, 2022 Author Share Posted May 5, 2022 7 hours ago, Cassie said: You certainly shouldn't ever nest ScrollTriggers - it's not just a bad habit that we advise against - it's not valid code. It will break your animations. Give that bit of the article a read! Ok very clear thank you @Cassie, i thought i could nest other ScrollTriggers targeting different elements and not the one that pins the whole thing. Regarding the problem on iOS.. if someone has a way to fix it feel free to share, i can't find a way out from this at the moment 1 Link to comment Share on other sites More sharing options...
OSUblake Posted May 5, 2022 Share Posted May 5, 2022 23 minutes ago, Milk0 said: Regarding the problem on iOS.. if someone has a way to fix it feel free to share, i can't find a way out from this at the moment We're looking into that. Can you confirm if the issue is still present if you don't create and the ScrollSmoother and just do ScrollTrigger.normalizeScroll? // let smoother = ScrollSmoother.create({ // smooth: 1, // normalizeScroll: true // }); ScrollTrigger.normalizeScroll(true); Link to comment Share on other sites More sharing options...
Milk0 Posted May 5, 2022 Author Share Posted May 5, 2022 18 minutes ago, OSUblake said: We're looking into that. Can you confirm if the issue is still present if you don't create and the ScrollSmoother and just do ScrollTrigger.normalizeScroll? I can confirm that. Without ScrollSmoother it goes well. Tested on Safari and Chrome It also work well for me without the normalizeScroll too Link to comment Share on other sites More sharing options...
monolith Posted June 16, 2022 Share Posted June 16, 2022 Hi, I'm experiencing this same issue. Is there any development on this, are we hopeful we'll see a fix in the near future? Link to comment Share on other sites More sharing options...
GreenSock Posted June 17, 2022 Share Posted June 17, 2022 Hi @monolith. Have you tried the latest beta on CodePen (or CodeSandbox)? ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js ScrollSmoother: https://assets.codepen.io/16327/ScrollSmoother.min.js (You need BOTH, and you may need to clear your cache. These files are not for deployment, as they only work locally and on codepen/codesandbox). We're working hard to find a way around the iOS browser bugs. Literally spent hundreds of hours so far just on that. Sorry about the delay/hassle. Rest assured that we're not ignoring it. 1 Link to comment Share on other sites More sharing options...
Koyash Posted July 8, 2022 Share Posted July 8, 2022 On 5/5/2022 at 9:44 PM, Milk0 said: I can confirm that. Without ScrollSmoother it goes well. Tested on Safari and Chrome It also work well for me without the normalizeScroll too Also having this exact issue, works perfectly fine on other devices or if I don't use ScrollSmoother and ScrollTrigger together. Below is my configuration for ScrollSmoother and ScrollTrigger. this.smoother = ScrollSmoother.create({ smooth: 0.5, effects: true, normalizeScroll: false, //disabling this makes ScrollSmoother not bug out on Iphone ignoreMobileResize: true, }); this.gsapTimeline = gsap.timeline({ scrollTrigger: { trigger: "#about-container", pin: ".pin", start: "top top", endTrigger: ".intro", end: "top bottom", // markers: true, scrub: 1, anticipatePin: 1, invalidateOnRefresh: true, immediateRender: false, }, }); Link to comment Share on other sites More sharing options...
Cassie Posted July 8, 2022 Share Posted July 8, 2022 What version of GSAP are you using Koyash - and do you have a minimal demo? Link to comment Share on other sites More sharing options...
Koyash Posted July 8, 2022 Share Posted July 8, 2022 33 minutes ago, Cassie said: What version of GSAP are you using Koyash - and do you have a minimal demo? Hey @Cassie, Thank you for the swift reply. I've created a minimal demo as requested. See the Pen KKozoEK by Koyash (@Koyash) on CodePen It works fine on most devices but the moment you try this on an iPhone it breaks. As for which version currently I am on the latest (3.10.4). Apologies for the video quality, I had to lower the resolution quite a bit to upload it. test.mp4 Link to comment Share on other sites More sharing options...
Cassie Posted July 8, 2022 Share Posted July 8, 2022 Ah ok! I think this is an occasion where normalizeScroll will come in handy. normalizeScroll is basically our best effort at getting around some tricky IOS browser bugs. with normalizeScroll - https://cdpn.io/pen/debug/poLyVKR without - https://cdpn.io/pen/debug/KKozoEK?authentication_hash=DqADdGQpjneA Let me know whether that helps? 1 Link to comment Share on other sites More sharing options...
Koyash Posted July 8, 2022 Share Posted July 8, 2022 23 hours ago, Cassie said: Ah ok! I think this is an occasion where normalizeScroll will come in handy. normalizeScroll is basically our best effort at getting around some tricky IOS browser bugs. with normalizeScroll - https://cdpn.io/pen/debug/poLyVKR without - https://cdpn.io/pen/debug/KKozoEK?authentication_hash=DqADdGQpjneA Let me know whether that helps? Enabling normalizeScroll makes everything jitter on iphone without having ScrollTriggers on top of it, that's why I had it disabled. I tried your demo but it's still affected by the jitter. Sadly I cannot upload a longer video. RPReplay_Final1657316473_1.mp4 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 9, 2022 Share Posted July 9, 2022 Ah, good to know thanks. Can you check this link for me and let me know if the jitter is still there?https://cdpn.io/pen/debug/poLyVKR Your recording is in an iframe (codepen) which is possibly the issue. 1 Link to comment Share on other sites More sharing options...
Koyash Posted July 9, 2022 Share Posted July 9, 2022 57 minutes ago, Cassie said: Ah, good to know thanks. Can you check this link for me and let me know if the jitter is still there?https://cdpn.io/pen/debug/poLyVKR Your recording is in an iframe (codepen) which is possibly the issue. Yep still jitters and occasionally skips to the end instantaneously, can't show a video anymore as I've reached the upload limit. Link to comment Share on other sites More sharing options...
Cassie Posted July 9, 2022 Share Posted July 9, 2022 Thanks for checking - what phone are you using? Link to comment Share on other sites More sharing options...
Koyash Posted July 9, 2022 Share Posted July 9, 2022 12 minutes ago, Cassie said: Thanks for checking - what phone are you using? Iphone 13 pro max with variable refresh rate ON. 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 9, 2022 Share Posted July 9, 2022 We'll take a look into it! Sorry for the issues. IOS safari is a tricky one to wrangle. Thanks so much for letting us know. 1 Link to comment Share on other sites More sharing options...
Akufeninc Posted July 18, 2022 Share Posted July 18, 2022 I found this topic because I was facing the same issue, and I managed to fix this by adding : scroller: null ...on my ScrollTrigger pin instance, when I am on mobile. So in my case (Vue project) I am using it like this to manage desktop (smooth-scrolling) / not desktop (no smooth-scrolling) : scroller: this.$device.isDesktop ? '#smooth-wrapper' : null, with this solution, i do not need to set normalizeScroll: true anywhere. 1 1 Link to comment Share on other sites More sharing options...
GreenSock Posted July 24, 2022 Share Posted July 24, 2022 @Koyash can you please confirm that this still has problems even after you clear your cache?: https://cdpn.io/pen/debug/poLyVKR?cb=1 I can't reproduce any problem on my iPhone or iPad. 1 Link to comment Share on other sites More sharing options...
Koyash Posted July 24, 2022 Share Posted July 24, 2022 1 hour ago, GreenSock said: @Koyash can you please confirm that this still has problems even after you clear your cache?: https://cdpn.io/pen/debug/poLyVKR?cb=1 I can't reproduce any problem on my iPhone or iPad. Yes I am, and by clearing cache I'm assuming this is the correct way. settings -> safari -> clear history and website data. Then going to this link https://cdpn.io/pen/debug/poLyVKR . I'm on iOS 15.6 all default safari settings except my search bar is at the top. Again in this particular CodePen it happens mostly when drag scrolling. Link to comment Share on other sites More sharing options...
GreenSock Posted July 25, 2022 Share Posted July 25, 2022 I added some cache-busting to the URLs. Please retry and confirm that it doesn't work for you. I cannot seem to break it. 🤷♂️ https://cdpn.io/pen/debug/poLyVKR 1 Link to comment Share on other sites More sharing options...
Koyash Posted July 28, 2022 Share Posted July 28, 2022 @GreenSock sorry for the late response it's been a busy week, but to answer your question. Yes, even after clearing cache and then going to the url you supplied (https://cdpn.io/pen/debug/poLyVKR) it continues to happen. I've tried on iPhone 7/x/11/13 and all have the same issue so I really don't know why you aren't able to reproduce this. 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