Slow Performance on Smooth Scroll - Animation Stuttering

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.

[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

[ehsan-shv]

do you find better way to fix this problem?