ESFOULA Posted March 21 Share Posted March 21 Hello GSAP Community, I wanted to express my gratitude for sharing such an incredible plugin with the public. It's been making remarkable strides in the realm of web development. Recently, I utilized the parallax example featured on CodePen, attributed as a GSAP demo. While it performs admirably on desktops, I encountered an issue when testing it on mobile devices. Unfortunately, there seems to be a peculiar stuttering effect while scrolling, causing the images to shake. You can find my demonstration on CodePen at the following link: CodePen Demo Additionally, I've integrated this demo into the following website: elsewedy-hospitality.com I'm hopeful that someone from the community could assist me in resolving this issue. Thank you in advance for your help! See the Pen abxJEOY by efoula (@efoula) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted March 21 Share Posted March 21 I don't have time to look right now on my phone, but that sounds like the classic problem of the browser using a different thread for scrolling than the main JS thread. Have you tried adding this?: ScrollTrigger.normalizeScroll(true); Or you could apply scroll smoothing to force the scroll to be done on the JS thread, like ScrollSmoother with a small amount of smoothTouch. Link to comment Share on other sites More sharing options...
ESFOULA Posted March 21 Author Share Posted March 21 @GreenSock Hello, I appreciate your response and the time you've taken to address the matter. Your solution has largely resolved the issue, reducing stuttering by about 90%. However, there still seems to be a slight lingering stutter, and scrolling up has slowed down slightly. Thanks. Link to comment Share on other sites More sharing options...
ESFOULA Posted March 21 Author Share Posted March 21 Hi again @GreenSock, I wanted to provide you with an update regarding the implementation of your recommendation to set the normalizeScroll to true. After doing so and testing it across various iOS devices, I regret to inform you that this solution inadvertently disrupted other animations present on the same page. Additionally, the scrolling behavior became erratic, exhibiting unusual behavior even within the parallax feature itself. Therefore, I had to revert the changes by removing the recommended line for the time being. Link to comment Share on other sites More sharing options...
Cassie Posted March 21 Share Posted March 21 Honestly my first step here would be to use transforms instead of backgroundPosition, that'll be easier on the browser to render. Give this one a go? See the Pen JjVWmJj?editors=1010 by GreenSock (@GreenSock) on CodePen debug link for mobile If that doesn't work, then maybe try smooth scrolling and transforms, (with the caveat that it's not a magic bullet and may not be appropriate for your project, it's a very aesthetic choice and I wouldn't add smooth scrolling on a website without consideration of the tradeoffs. E.g - You'll need to adjust your markup to allow for fixed elements to be outside of the smooth scrolling area See the Pen jORBeKe?editors=1010 by GreenSock (@GreenSock) on CodePen debug link for mobile If those options don't work it's time to face the reality that sometimes animations can be a little much for mobile browsers, safari makes our lives difficult sometimes. I often remove certain animations or create more simplified fallbacks for mobile. You can do that nice and easily with gsap.matchMedia() https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ Hope this helps! 2 Link to comment Share on other sites More sharing options...
GreenSock Posted March 21 Share Posted March 21 5 hours ago, ESFOULA said: I wanted to provide you with an update regarding the implementation of your recommendation to set the normalizeScroll to true. After doing so and testing it across various iOS devices, I regret to inform you that this solution inadvertently disrupted other animations present on the same page. Additionally, the scrolling behavior became erratic, exhibiting unusual behavior even within the parallax feature itself. Therefore, I had to revert the changes by removing the recommended line for the time being. If you'd like some help beyond @Cassie's excellent advice, please make sure you provide a minimal demo and be more specific about what exactly is going wrong. You said "...inadvertently disrupted other animations..." but I have no idea what that means exactly. And "scrolling behavior became erratic" and "...unusual behavior even within the parallax feature...", but when I tested in the original demo you provided, I saw no problems whatsoever on my iOS device. What happened exactly and how can we reproduce it on our end? You might also want to try this in addition to the normalizeScroll(true) option: ScrollTrigger.config({ ignoreMobileResize: true }); And are you using the latest version of all the files? 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