Jump to content
Search Community

ScrollTrigger animation performance on 'low-end' devices

drckeberger test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

Performance problems are typically caused by graphics rendering hogs, like in your case you're using mix-blend-mode: difference and I'd suspect that's rough on the CPU. 

 

A few other things I noticed: 

  1. Your animations are quite a bit different between the two versions - you're not comparing apples to apples. You've got multiple ScrollTriggers, but only one ScrollMagic scene. Your timings are different, you've got more things overlapping in the ScrollTrigger version, etc. You're animating "width" and "height" properties for 4 seconds WHILE animating "left" in the ScrollTrigger version, but in the ScrollMagic one you only animate width/height for 0.3 seconds. Those are expensive properties to animate for the browser (it's super easy for GSAP - it's just that the browser must do a lot more calculations to render things...unrelated to GSAP). You're animating rotation in the ScrollTrigger one, but not ScrollMagic. It's just not a fair comparison. I'd be pretty shocked if ScrollMagic was faster than ScrollTrigger in a fair head-to-head comparison. My [limited] tests always showed ScrollTrigger delivering better performance. It's highly optimized.
  2. You're using invalid start/end values in your ScrollTriggers. They're supposed to have two values (space-delimited), like "top top" or "50% 100%", but you're using things like "0%" and "75%". See the docs.

And yes, width/height/top/left are much, much more expensive for the browser to update 60 times per second because they affect layout whereas scaleX/scaleY/x/y (transforms) don't. 

 

My recommendations:

  1. Remove the mix-blend-mode and see if it makes a big impact in your tests. Avoid any filters whatsoever.
  2. Animate transforms (x/y/scaleX/scaleY) instead of width/height/top/left whenever possible. I realize that sometimes the effect you want cannot be achieved without animating width/height. You'll have to decide what's possible. 
  3. Try setting will-change on the elements you're animating. 

Good luck!

  • Like 4
Link to comment
Share on other sites

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. 

 

 

Link to comment
Share on other sites

12 hours ago, drckeberger said:

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. 

Sounds good. Please do let us know what you find. Good luck!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...