Slow Performance on Smooth Scroll - Animation Stuttering

[Reza-Eskandari]

Hello 👋

Describe the bug Even though I've incorporated the data-scroll-section, I've noticed when I enable smooth scroll the scroll behavior becomes very slow and choppy and my CSS animation stutter heavily. It becomes a lot more noticeable on elements that have different data-scroll-speed for the parallax effect (in my case is a bunch of images in a grid).

To Reproduce I can't share my code here but I noticed the same frame drops on the locomotive.ca homepage. But at the same time when I visit this codepen example, everything is buttery smooth! The reason I chose the locomotive.ca website is that my homepage shares a lot of similarities (like using Swiper Js,GSAP, etc). Regardless I've forked the codepen example mentioned above surprisingly it's buttery smooth literally everywhere except the section I added. Here the link to the forked version: https://codepen.io/itsprorez/pen/xxOgRoO . I've noticed the choppiness mainly when the scroll travels a short distance and when it's easing at the end.

Expected behavior I really want to achieve the same performance as this codepen example but I have no idea what I'm doing wrong!

Screenshots

• Here's a screenshot of the locomotive.ca website recorded starting at the top of the website and ended at the bottom. https://share.getcloudapp.com/v1uxQln8
• Here's a screen recording of the choppiness behavior in the locomotive.ca : https://share.getcloudapp.com/NQu1jbGq
• Here's a screen recording of the choppiness behavior in my website: https://share.getcloudapp.com/NQu1jd1K

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version 86.0.4240.111 (Official Build) (64-bit)

Smartphone (please complete the following information): Everything works fine on smartphones. I've noticed the problem only on desktop browsers.

Thank you 👊

UPDATE: I've incorporated the CSS will-change property ( https://developer.mozilla.org/en-US/docs/Web/CSS/will-change ) on those elements that get animated on the scroll and that has helped a lot with the scroll performance. But there are still some frame drops every once in a while.

[ehsan-shv]

do you find better way to fix this problem?

[dngraphisme]

Hello @Reza-Eskandari, i have a similar problem :(

On a Wordpress site for one of my clients. I have update Locomotive in version 4 but since the homepage is really slow to scroll on chrome.

No problem, however, on Firefox dev or safari ...

Could someone help us ?

[isotropicdesign]

Some issue on WordPress. Any developments regarding this issue? My smooth scroll is super choppy.

[ehsan-shv]

no better way to fix this problem yet? I think this problem is because of virtual-scroll library that locomotive scroll use and if will use smooth scrollbar library instead of virtual-scroll, will make this problem fix.

[BlazeIsClone]

Hey guys so I've ran into the same problem, everything worked fine except when the scrolling came to an end the text will start loosing FPS and becomes laggy (like a shivering effect). I've tried many different things although one thing fixed it for me, so check this out if you are facing something similar to what I have experienced.

will-change: transform, opacity;

Don't apply will-change to too many elements (that's the first things said in the docs)

MDN Web Docs - will-change

[SoulDesignerTom]

I've noticed that on my website this laggy issue was made by having a very complex SVG image. Even if it was in a tag - changed to .png and everything works perfectly smoothly.

Try to determin what is causing this lagging - you can remove section by section and aim for the problem.

[MikeyJinWei]

I've noticed that on my website this laggy issue was made by having a very complex SVG image. Even if it was in a tag - changed to .png and everything works perfectly smoothly.

Try to determin what is causing this lagging - you can remove section by section and aim for the problem.

Thx! Ran Into the same issue as yours and I just fixed it by replacing complex svg img with png...lol

[paul-coupl]

Placing will-change: 'transform' in the styles of data-scroll-section magically enhanced the performance 👍

[maviarebo]

Gsap scrollsmoother pade is shaking while scrolling issue

• I was scrolling a website, and I noticed that an element's border is shaking and behaving oddly. I tried using 'will-change: transform,' but it didn't fix the issue.

Hey, can anyone lend a hand with fixing this problem?