ScrollTrigger: Extremely laggy/jerky/poor performance on laptops only, especially Chrome

[marincarroll]

I'm guessing this is not a simple solution but rather a collection of improvements that need to be made – our ScrollTrigger animation performs horribly on laptops (especially Chrome), but totally fine on desktop, presumably due to hardware capabilities. The CSS properties ScrollTrigger applies to the pinned area take forever to catch up, the subsequent sections of the page 'pop up' and overlap this hero area when they aren't supposed to (almost as if the calculation of the scroll distance is glitching), the animations lag, etc. etc. It looks fine when scrolling slowly, but normal to fast scrolling speed is unusable.

 

Here's the live page: https://celsiustxdev.wpengine.com/

And here is the CodePen recreation: https://codepen.io/marincarroll/pen/QWmJxdv

 

What I know so far: 

• The CodePen (which doesn't include the rest of the page's content) performs better than the live example, but you can still see the issue.
• Most importantly I've tried removing the videos and/or blur filter, since obviously those eat up a lot of performance, and it does help somewhat but not nearly enough.
• The live page performs better when I remove the other blocks on the page (some of which also use GSAP) and replace them with dummy text, but does not solve the issue entirely. The scroll distance doesn't seem to glitch as much but the lagging and jerkiness is still pretty bad.

I've also tried the following solutions:

• Adding will-change: transform to the pinned element. Your documentation says NOT to do this but it genuinely seemed to help
• Adding  will-change: filter, visibility, opacity to the videos, kinda seemed to help....?
• Adding anticipatePin: 1 and scrub: 0.1 (instead of true). Really can't tell if this is doing anything though.
• fastScrollEnd, which does nothing
• Every hardware acceleration trick I can think of, including but not limited to transform: translate3d(0, 0, 0), translateZ(0), backface-visibility: hidden, more will-change's on the non-ScrollTrigger Animations, etc. etc. to no results.

 

I greatly appreciate any help you can provide!!!!

Thanks,

Marin

See the Pen by (@) on CodePen

[Cassie]

The bad news here is that (as you mentioned) filters are really really really bad for performance when teamed up with animation. Especially over such large areas. That's why people go the webGL/Shader route for stuff like this.

That being said on chrome on my laptop this is fine for me. I do have one of the fancy new mac's though so I'm likely not a good test subject

[GreenSock]

Yeah, the biggest culprits are definitely that you're pushing the browser VERY hard rendering-wise (unrelated to GSAP). 

 

Two quick things I noticed: 

onUpdate: ( self ) => {
  //Fade out content after first 90% of scroll
  if ( self.progress > 0.9 ) {
    fadeOutContent.play();
  } else {
    fadeOutContent.reverse();
  }
}

That's unnecessarily expensive. It won't hurt anything significantly. In fact, you probably won't notice any real-world difference whatsoever, but you're literally calling .play() or .reverse() on every single scroll event while that ScrollTrigger is active. Why not just set up a different ScrollTrigger with toggleActions to do that? 

 

Have you tried setting ScrollTrigger.normalizeScroll(true)? You mentioned that the pinning CSS changes "take forever to catch up" - I assume you mean the scroll events are firing on a separate thread and the screen is updated but the pinning happens a tick or two later? If so, that's because browsers handle scroll on a separate thread but you can make it happen on the main thread and be synchronized with ScrollTrigger's JS stuff by setting normalizeScroll(true). That won't solve your performance problems - it's just a potential help for synchronizing. 

[marincarroll]

Thanks for the quick response guys! I'm going to work with my designer to get revised assets so I don't have to use mix-blend-mode. As for the blur filter, well, hopefully it won't come to that

 

That being said, I still see this issue when the blur filter is turned off, and even when the videos are removed altogether, and yes it's only on devices with less fancy-schmancy hardware. Oddly enough my coworker says that the CodePen demo performs "100% better" for her than the live version – for me, it still has issues but is also significantly better. This is strange because they both are using the same performance-heavy stuff (mix-blend-mode/filter/autoplaying video), and there isn't too much going on on the live page other than this.

 

@GreenSock:
1) I was a little hesitant to figure out how to nest ScrollTriggers but will definitely make that improvement. 
2) It looks like ScrollTrigger.normalizeScroll() causes the scrollbar to barely respond – do I need to set the velocity in some way? The issue is not only the pinning happening late (although that is happening as well, especially on entering back), but that ghostly versions of subsequent areas of the page pop up and overlap it – areas that WOULD be on-screen if ScrollTrigger wasn't adjusting the height of the pin spacer. Either that, or just nothing happens for up to a second. After this second, everything pops back into place. The scroll-based animations also lag severely. 

 

Here is a video of what the issue (or pile of multiple issues) looks like, I added bright colors to the subsequent sections to help illustrate: https://jmp.sh/SfM3hgg

 

 

[marincarroll]

I should mention I've done similar things to this with ScrollTrigger before and those past projects have SOME lagging issues on this laptop, but nothing quite as bad, which is why it's odd that it still happens when the videos (and all the performance-heavy effects applied to them) are hidden.

[Cassie]

Quote

That being said, I still see this issue when the blur filter is turned off, and even when the videos are removed altogether,

^ do you have a demo or video of this situation?

I'm not hugely surprised about the blur filter - it covers the whole screen and they're notorious. But it's concerning if you're having issues without any blur filters or huge assets. We'd hugely appreciate it if you could narrow that down so we can check!

 

 

[marincarroll]

37 minutes ago, Cassie said:

^ do you have a demo or video of this situation?

I'm not hugely surprised about the blur filter - it covers the whole screen and they're notorious. But it's concerning if you're having issues without any blur filters or huge assets. We'd hugely appreciate it if you could narrow that down so we can check!

 

 

It seems like some of the performance improvements I've made have helped – I now have to scroll REALLY fast to see issues when the video is removed. However, simply turning on/off the filter and blend modes doesn't seem to help – with the video alone and no effects, it still has nearly the same amount of issues. It seems like the repainting of the video is what's hogging the most performance right now 😢

 

https://jumpshare.com/v/pVzDHkt3ffcWwwZ7xGGD

 

[GreenSock]

4 hours ago, marincarroll said:

It looks like ScrollTrigger.normalizeScroll() causes the scrollbar to barely respond – do I need to set the velocity in some way

You mean you try dragging the scrollbar and it takes a long time to update? Or are you using a mouse wheel? Or touch? It sounds like maybe you're stressing out the main thread so much that it's totally bogged down with all that rendering(?) 

[marincarroll]

Thanks for giving me so much help guys, even though it went beyond the scope of your product!

 

For those who are interested, I modified this code to use a canvas element instead  and then draw frames from the video onto the canvas. Turns out the canvas version of the blur filter is MUUUCHHH less taxing than the CSS version, which I had no idea about (I assumed they were about the same since their syntax is the same – go figure!).

 

My designers also created a WebM version of the video with transparency, and that reduced the file size by 1500% and eliminated the need for blending modes. Altogether there is a little lagging when scrolling very fast, but equivalent to other projects I've used ScrollTrigger on.

[GreenSock]

That's great! Thanks for sharing your findings, @marincarroll