Jump to content
Search Community

Nuxt.js site laggy on mobile versus desktop

nicolaseielll test
Moderator Tag

Recommended Posts

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

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!

  • Like 2
Link to comment
Share on other sites

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

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

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

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

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

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.

  • Like 1
Link to comment
Share on other sites

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...