Jump to content
Search Community

scroll smoother is jerky

Sergio1981 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello,

I have a question about scroll smoother.

I am currently using it for a new project on my local host.

 

On my computer the site works very well and there is nothing to complain about. Now I have put the project on my notebook to present it next week. I noticed that my notebook obviously has problems displaying scroll smoother smoothly. The RTX2060 graphics card is running at about 50% when I scroll the page.

 

I partly use data-lag, pinned elements and a smooth effect with 1 second of lag.

 

Making a codepen demo is almost pointless, as it won't reflect the project. But is there a trick so that it also works on slower computers? I think that if it doesn't run smoothly on a notebook, it won't run at all on a smartphone.

 

I also can't imagine that scroll smoother was designed to only run on fast computers. So are there things to consider?

 

I would also like to add that I do not use any CSS transforms.

 

 

I am very grateful for any kind of support.

Link to comment
Share on other sites

  • Solution
9 hours ago, Sergio1981 said:

Now I have put the project on my notebook to present it next week. I noticed that my notebook obviously has problems displaying scroll smoother smoothly.

In my experience, 99.99% of the time performance problems have absolutely nothing to do with GSAP and everything to do with graphics rendering in the browser. So it's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 

  1. Try setting will-change: transform on the CSS of your moving elements. 
  2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
  3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
  4. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
  5. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
  6. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
  7. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
  8. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
  9. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). 

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" :)

 

9 hours ago, Sergio1981 said:

I would also like to add that I do not use any CSS transforms.

I assume you meant "CSS transitions", right? Transforms are fine. They're much better to animate than things like top/left, for example. 

 

9 hours ago, Sergio1981 said:

I also can't imagine that scroll smoother was designed to only run on fast computers. So are there things to consider?

We obsess about performance for sure. But we're not miracle workers. The very nature of smooth scrolling is more demanding on the browser rendering-wise. We did the best we could with the features offered, and we definitely didn't "design" it to only run on fast computers. That doesn't mean that you can build a graphics-intensive site with all kinds of effects and expect it to run buttery smooth on slow mobile devices. 

 

I hope that helps! And thanks for being a Club GreenSock member! 💚

  • Like 1
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...