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