drckeberger
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by drckeberger
-
-
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
See the Pen WNRJJOG by magnificentmarc (@magnificentmarc) on CodePen
//edit: I included the ScrollMagic version as a reference of 'less' stutter.
See the Pen xxgWWNz by magnificentmarc (@magnificentmarc) on CodePen
ScrollTrigger animation performance on 'low-end' devices
in GSAP
Posted
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.