drckeberger

Thanks for your answer. That's basically what I was looking (and hoping) for. I really don't want to go back to ScrollMagic ? I've got quite a bunch of mix-blend-mode elements in my actual project (which performs a lot worse), so you might have hit the nail on the head right away. I'm definitely gonna test these tips out step by step.

Good afternoon everyone, I'm currently developing a private project using Scrolltrigger/GSAP, but I've come across some performance issues that I'd like to have an opinion on. I've attached 2 CodePens with a couple of parallel animations that are similar to what I use in my project. One uses ScrollMagic + GSAP and one uses ScrollTrigger + GSAP. Both work perfectly smooth on my workstation with somewhat up-to-date hardware (i7 10th gen, 32gb RAM and an RTX 2070). On my Surface Book (1st Gen: i5-6300u, 8gb Ram, iGPU only) on the other hand, I am getting really bad animation stutter when scrolling. Especially with ScrollTrigger. My original implementation in React.js (with ScrollTrigger) looks like a 10 fps video game when scrolling through. This brings me to my question(s): a.) Do you think this is to be expected on 'lower end hardware'? My iPhone 11 handles the animations fairly well. b.) Do I make any obvious mistakes with my tweens? I read that some attributes like height/width tax the performance more than others - is this a possible issue here? I'd certainly be surprised if that's the case. Any help would be greatly appreciated! Cheers, Marc Since it's hard to replicate stutters sometimes I've additionally attached a video of how both CodePens display on the surface device: a.) ScrollTrigger: Video of the stutter b.) ScrollMagic: + Video of (less) stutter https://codepen.io/magnificentmarc/pen/xxgWWNz https://codepen.io/magnificentmarc/pen/WNRJJOG //edit: I included the ScrollMagic version as a reference of 'less' stutter.