GSAP animation high CPU load (especially in Safari)

[Killerwork]

Hi,

 

We made a couple of animations: 
1. 

See the Pen VOrWmv by someboringstuff (@someboringstuff) on CodePen

2. 

Only the CPU load is very high and on Safari (Mac + iOS) the webpage won't open when multiple SVG animations are placed on the same page.

Do you have any ideas/recommendations to reduce the CPU load?

Thanks!

See the Pen wbPqWQ by someboringstuff (@someboringstuff) on CodePen

[GreenSock]

Cool animations, @Killerwork!

 

The CPU problem is likely caused by the complexity of the SVG and how much work it is for the browser to render all those pixels, especially on Apple devices that have super high-resolution screens. The great thing about SVG is that it's resolution-independent...but that's also the BAD thing about it. The device must fabricate all those pixels dynamically. 

 

Some of the toughest things to render in SVG are gradients, clipping paths, and strokes. You've got all of those going on. 

 

To be clear, this probably has nothing to do with GSAP. I'd guess that all of GSAP's work accounts for less than 2% of the CPU load. 

 

If you need better performance, you may need to switch to <canvas> or swap some of the more complex graphics out for raster (pixel) images. I wish I had a simple setting that'd suddenly cause everything to render silky-smooth on all devices. 

[Killerwork]

Thanks Jack for your quick reply!

We will make the animations more simple to reduce the CPU load.

 

We've already done some extra testing and came up with 2 more questions:

1. We've noticed in Safari, when a page has multiple animations, all the animations (also outside of the viewport) are loaded an stress the CPU. Is there an option to only start (and stop) animations when visible in viewport? This will help to reduce the CPU load in Safari.
-> This does not happen in Chrome and Firefox.

2. We've already tried to remove most parts of the animations only the CPU load in Safari keeps getting really high (about 60% on a 2,6 gHz i7 - Macbook Pro). Do you know what part of this animation stresses the CPU so much (especially on Safari)? So we can change or remove this part of the animation.


Thanks again!

[ZachSaucier]

Just a heads up: when I scroll past the demo window on an Android in Chrome I get some significant jank. 

 

Searching for "debugging animation performance" or something similar can teach you about how to figure out what the problematic areas are (as well as just deleting things and seeing if it helps). Sorry, I'm restricted to mobile right now or I'd try to help more.

[GreenSock]

1) There isn't anything built into GSAP that'll do that for you, no, but you can certainly wire it up yourself. ScrollMagic might be useful as well (that's not something we authored - it's a 3rd party tool that some people use to trigger things based on scroll). 

 

2) I already provided a list above of the things that I think are most CPU-intensive (gradients, clipping paths, and strokes). Again, none of that has anything to do with GSAP - it's just about the browser rendering resolution-independent graphics. Moving to canvas or using something like PIXI.js might really help. 

 

Oh, this is very minor, but you don't have to specify units for rotation if it's the default of 'degrees'>. In other words, rotation:"50deg" can simply be rotation:50. That'll save a tiny amount of CPU cycles interpreting the units

[Jonathan]

Hi @Killerwork and Welcome to the GreenSock forum!

 

To add to all the above great advice. I would second on SVG being a CPU hog, since SVG cannot take advantage of the GPU (your graphics card) to animate. That is why you will see that CPU spike even more on mobile.

 

You can also look into the HTML5 Intersection Observer API to try and detect when your elements are outside or inside the viewport. This way you only animate when your elements are inside the viewport.

 

IntersectionObserver API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

 

You can also checkout the HTML5 Page Visibility API to detect when a user gives focus to another tab so you pause your animations when the browser tab of your animation is not active.

 

Check out this codepen example of the Page Visibility API with GSAP :

 

See the Pen sxgJl by jonathan (@jonathan) on CodePen

 

Page Visibility API: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

 

Happy Tweening