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.

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

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.

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

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