Open Reza-Eskandari opened 4 years ago
dngraphisme
commented
3 years ago 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
commented
3 years ago Some issue on WordPress. Any developments regarding this issue? My smooth scroll is super choppy.
BlazeIsClone
commented
3 years ago 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)
SoulDesignerTom
commented
2 years ago 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
commented
1 year ago 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
commented
1 year ago Placing will-change: 'transform' in the styles of data-scroll-section magically enhanced the performance 👍
maviarebo
commented
6 months ago Gsap scrollsmoother pade is shaking while scrolling issue
Hey, can anyone lend a hand with fixing this problem?
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 differentdata-scroll-speedfor 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
Desktop (please complete the following information):
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-changeproperty ( 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.