ScrollSmoother | Text " shakes " when animation is about to end | "will-change" property and general performance

[Policsek]

( the problem described below is not applied only to scroll smoother from gsap, I have the same problem with locomotive scroll and others smooth scroll plugins )

Hi. 

I'm using scroll smoother to create a smooth scroll experience. The only problem is that when the animation is about to end ( after you trigger the mouse wheel ), some elements are " shaking " until the animation is completed, especially text elements, seems glitchy. Maybe if you are using a MAC, you won't notice this glitchy-shaking-effect when the animation is about to end, but on Windows ( with some good hardwares ), it does shake.

Since scroll smoother ( and other plugins ) are transforming some "<div class="content"> ... everything ... </div> " on Y axis , a solution is to set " will-change: transform " on that ".content" div. This solution seems to work for me. Adding this property, everything work just fine, no shake at all. But acording to mdn, adding " will-change: transform " on too many elements, can cause other perfomance problems.

 

Have you noticed this glitchy-shaking when using scrollSmoother plugin? ( or others ) How would you fix it?

[OSUblake]

Hi Policsek,

 

That's a known issue when animating any type of text with anything, not just GSAP. The browser is going to prioritize making the text legible, so it's going to snap to certain values to remain clear. Adding will-change will of course fix that, but that's probably something the dev should make the decision about.

 

MDN put that's warning out there because they don't want people abusing the property, e.g.

 

* {
  will-change: transform;
}

 

Having it on everything can use up too much memory and can decrease performance. The best advice is to just test with and without using will-change. There are no hard rules on how much is too much as it's going to vary by browser and what you're rendering to the screen.

 

I personally have never run into any issues with overusing will-change.

 

[Policsek]

Thank you!

 

I guess I will do this trick for h1,h2..h6,p,span,a,strong. Maybe I can create a function that "adds/removes" will-change property only when the page is scrolling. So you scroll - some elements get this property ( maybe only elements that are in viewporr ) - you stopped scrolling -these elements get will-change: unset - and so on. I'm not sure of this helps or not the overall performance.

[alisafa]

@OSUblake I had the issue with text they shake on scroll and I solve it with the way you mentioned ``` will-change : transform ``` so thanks alot !

[alisafa]

@OSUblake Hi dear friend , I add will-change : transform to a P tag and in local environment it solved my problem with shaky text , but after I built my project I have still the shaky text but not in local , do you know can I solve it ? thanks in advance 


Update: I am sorry it was my mistake and I solve it, but I Couldn't find a way to delete my reply