Jump to content

Johan ⚡️ Nerdmanship

Req: Help understanding heavy load tweens

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello invaluable mods and heroes!


In any little project or exploration I do, I try to learn something about performance. Sometimes I need to scrap an interesting technique simply because I can't use it with an ok frame rate.


Such as this one: 

See the Pen grNJwR by stromqvist (@stromqvist) on CodePen


Here's another one with an ok frame rate:

See the Pen bpPyNY by stromqvist (@stromqvist) on CodePen


In this case specifically – It made me thinking... Somewhere in between those two explorations, my computer starts to breathe heavily. There's probably some very demanding computations going on. Obviously, that's something that I wish to avoid. I'm not too strong on the javascript side, but something tells me there ought to be a way to do this computation once and then just repeat it, since the animation loops identically every time. Is something like this doable?


In general – I don't know much about the heavy load on the CPU (and possibly GPU) that different GSAP animations can invoke. Don't know much about memory leaks, caching and similar computer science stuff, but I do come across it in some articles I read, and as a Js novice, I figure I'm making all the typical mistakes in the book. I'd love any thoughts and advice relating to GSAP and performance! Any reading tips and most of all any codepen examples on how to apply GSAP in smart ways!


I understand that my question is broad. I would narrow it down if I knew how. Please share any thought that comes to mind. I just wanna move a little bit forward from here.


Thanks for reading and taking your time! Peace, love & GSAP!

See the Pen grNJwR by stromqvist (@stromqvist) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi Johan,
Your crab animations are really good! You should tweet them to @greensock and @codepen. It only takes a few retweets to end up on the front page of CodePen. Just make sure your demo is a new pen and not a fork of something else you were working on.
About performance, crazy effects like your demos are doing can run at 60fps. Finger smearing fluids...
But that's WebGL, and is all done on the GPU. Right now SVG's really don't take advantage of the GPU, so animating filters like that can be real slow. SVG performance scales with the complexity of the graphic. Anything dealing with stuff like blurring, blending, shadows, gradients, etc can be very taxing on your system, leading to poor performance.
And GSAP actually doesn't animate anything. It's just changing the values of something, and does not control how those changes are being used or displayed. So performance is largely based on what you are using to do the rendering. Compare these two animations. They're somewhat similar and both using GSAP, but one's rendered with WebGL and the other is rendered with SVG.
WebGL - 

See the Pen PNXbGo?editors=0010 by zadvorsky (@zadvorsky) on CodePen

SVG - 

See the Pen 297954bb0fc3f5afe0ad6c03e7ea85a4?editors=0010 by osublake (@osublake) on CodePen

You brought up caching, which basically means saving something. Every time you do this you are caching a jQuery object.

var foo = $("#foo");

Caching improves performance because it's reduces the amount of work that the computer needs to do. You might have heard of the term DRY, Don't Repeat Yourself. You should also try to do the same for the computer. Don't make it repeat a task that can be cached. You can actually improve SVG performance by caching it as an image. Check out this example in Chrome. 

See the Pen MwVymw?editors=0010 by osublake (@osublake) on CodePen

Same animation, same graphic, but totally different performance. Caching the SVG as an image makes all the difference, and it only takes a few lines of code to convert an SVG to an image. 
You can switch back and forth between the two or re-cache the SVG if needed. The only caveat is that you can't use that technique in any version of IE, so they get stuck with crappy performance.


And when it comes to performance with regular HTML elements, you should try to focus on things that will not affect the layout or other elements. Basically transforms (x, y, z, scale, rotation, skew) and opacity.

  • Like 5
Link to comment
Share on other sites

Thanks a million for your reply! And also thanks for the advice and compliments on Bob the crab!


Those are some great demos you shared! The examples of caching SVG as images really display some significant difference. I will definitely use that!

Link to comment
Share on other sites

I'm with Blake - you should tweet out those crab animations. They're really cool! :)


Here's a little reference site with some info about layout changes and painting.




Happy tweening.


  • Like 2
Link to comment
Share on other sites

Thank you so much for the advice, Blake! I woke up to a notification that Chris Coyier picked Bob for the frontpage of codepen – amazing! Having followed Chris for years, just being a fanboy and not even working with front end dev, that's really boosting the confidence to keep working with SVG and GSAP!


And Craig, your stuff is amazing! Thanks for the support and the likes!


And thank you for enabling me to explore this stuff, Greensock! Carl, Jack and others I may not know!


(Sorry for the complete off-topic)

  • Like 3
Link to comment
Share on other sites

Yep, Blake did a great job summarizing things. I'd guess that 95% of the time when someone is running into a performance problem, it has nothing to do with the animation engine itself - it's almost always the graphics rendering load that the browser is struggling with. For example, it may take 1 millisecond for GSAP to set the value of a filter (or any property), but it might take 200ms for the browser to do its work under the hood to calculate all the changes to the pixels on the screen and do the rendering. 


SVGs are particularly performance-sensitive because of their resolution-independent nature. The browser basically has to fabricate all the pixels on-the-fly (it can't just use the GPU to stretch/scale/shift a set of raster pixels around). I love SVG, and it can be fantastic for many things, but you just have to be careful performance-wise. 


As for specific tips with GSAP, we've already done a bunch of work to make sure you don't have to worry about much. It's a deep topic, but for most people the main thing to keep in mind is just which properties they choose to animate (which actually has very little to do with GSAP - it's about being mindful of which properties are more expensive for the browser rendering-wise). So stick with transforms and opacity, like Blake said, as much as possible. 


Great job on the crab(s). Congrats on getting noticed on codepen too :)


Happy tweening!

  • Like 4
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.