Share Posted April 30, 2022 I have created a website with the help of gsap scrollSmoother plugin and it works very well on desktop but on mobile it is a bit laggy and the user experience suffers bc of that. Is there something I could do to fix this? Here's the demo domain so you can try it on mobile and desktop: https://xos-website.vercel.app/ I would make a codepen for this issue but Im not sure what to put there because I'm not sure what exactly is causing it. Thanks in advance! Link to comment Share on other sites More sharing options...
Share Posted April 30, 2022 Nice looking site, @nicolaseielll. Performance audits can be very time-consuming because there are so many factors involved. That's not something we can do for free in these forums, but you could try setting will-change: transform on the smooth-content element to see if that helps anything. Or apply that to the bigger things that you're animating. You could also try setting the smoothTouch to something small like 0.2 and see if that helps. If you need more help, you're welcome to either contact us about paid consulting services or post in the "Jobs & Freelance" forum. Good luck! 2 Link to comment Share on other sites More sharing options...
Author Share Posted April 30, 2022 Thank you for these suggestions! I'll try them! Link to comment Share on other sites More sharing options...
Author Share Posted May 1, 2022 Does this indicate to anything: When I scroll with my mousepad on my computer, the scrolling is smooth and works great but when I try to swipe the screen in the dev tools just how you would do on a mobile device the smooth-content transform changes from transform: matrix3d() to translateY(0px) back and forth. (but scrolling with two fingers the transform stays in matrix3d) Link to comment Share on other sites More sharing options...
Share Posted May 1, 2022 It is super difficult to troubleshoot without a minimal demo, but that sounds a little fishy. The translateY() thing sounds like it’s from an iOS workaround but I don’t think that should be happening on the same element where you’ve got a matrix3d(). Please provide a minimal demo if you’d like more help. Also keep in mind that when you have Dev Tools open the browser has a lot more work to do, so it can appear to slow things down. Link to comment Share on other sites More sharing options...
Author Share Posted May 2, 2022 On 4/30/2022 at 8:02 PM, nicolaseielll said: I would make a codepen for this issue but Im not sure what to put there because I'm not sure what exactly is causing it. I provided the website url so you can check whats happening on the smooth-content element. The same laggy behavior happens on a mobile device so it's not only in the dev tools iPhone 12 pro. Link to comment Share on other sites More sharing options...
Author Share Posted May 2, 2022 I'll just try to make a codesandbox of the whole lander Link to comment Share on other sites More sharing options...
Author Share Posted May 2, 2022 I solved the problem partially by setting the smoothTouch to 0 but the pinned section is still pretty laggy. I tried taking the images off completely but it didn't have any effect. What could be causing this behavior: Here's the sandbox of the problem: https://codesandbox.io/s/solitary-architecture-gprii8 try it on a mobile device, on desktop there's no problem Here's a screen record of the pinned section so you can compare it to the desktop version: Link to comment Share on other sites More sharing options...
Share Posted May 2, 2022 2 hours ago, nicolaseielll said: I solved the problem partially by setting the smoothTouch to 0 Are you saying that if smoothTouch is anything greater than 0, it breaks? This sounds very odd to me. 2 hours ago, nicolaseielll said: but the pinned section is still pretty laggy. Are you looking at it on an iOS device? Have you tried setting normalizeScroll: true? Link to comment Share on other sites More sharing options...
Author Share Posted May 3, 2022 Yes I have, it didn't have any effect:( I have also tried it on other devices but it does not get better. Is there anything strange with my code if you check the /* layer effect */ section from the mounted() ? Link to comment Share on other sites More sharing options...
Share Posted May 3, 2022 8 hours ago, nicolaseielll said: Is there anything strange with my code if you check the /* layer effect */ section from the mounted() ? That's a lot of code to go through. Can you reduce that down to a minimal demo? You don't even need to include Vue/Nuxt. Just something basic that recreates the issue. 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 4, 2022 Yeah sure, here's a minimal recreation: https://codesandbox.io/s/solitary-architecture-gprii8?file=/pages/index.vue Link to comment Share on other sites More sharing options...
Share Posted May 4, 2022 Thanks for the demo. I just enabled normalizeScroll and it seems to have fixed it on my end for Android and iOS. Is this working for you? https://codesandbox.io/s/hopeful-wood-mhojbi?file=/pages/index.vue Link to comment Share on other sites More sharing options...
Author Share Posted May 4, 2022 It works in codesandbox on IOS but when I try it on the original website (https://xos-website.vercel.app/) it lags even more with normalizeScroll:( very weird... Did you add anything else than this?: ScrollTrigger.normalizeScroll(true); Link to comment Share on other sites More sharing options...
Share Posted May 4, 2022 No, please do this instead: ScrollSmoother.create({ normalizeScroll: true, ... }); Does that make any difference? And you're absolutely positive you're using ScrollTrigger and ScrollSmoother version 3.10.4 or later, right? I wonder if you've got a cached old version somewhere? Link to comment Share on other sites More sharing options...
Author Share Posted May 5, 2022 I tried, it did not:( How can I make sure I don't? At least this is what my package.json says: "gsap": "npm:@gsap/shockingly@^3.10.4", Link to comment Share on other sites More sharing options...
Share Posted May 5, 2022 7 hours ago, nicolaseielll said: How can I make sure I don't? At least this is what my package.json says: Can you verify that it is the latest version. Look for the version number inside the package.json in node_modules > gsap > package.json. Link to comment Share on other sites More sharing options...
Author Share Posted May 5, 2022 Yes, "version": "3.10.4", Link to comment Share on other sites More sharing options...
Share Posted May 5, 2022 Then I'm not sure what to really recommend and this point. If that CodeSandbox version works fine for you, I would reduce everything you have down to that, so just some basic panels and nothing else, and then start adding in the rest of your page's layout, images, text, etc until you figure out what might be causing the issue. Link to comment Share on other sites More sharing options...
Author Share Posted May 6, 2022 I added pinType: "fixed" to the scrollTrigger object and it got better on mobile but now it does't work on desktop 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