Jump to content
GreenSock

chris_hengst

SVG Animations and GPU workload

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

Hi there,

 

I'm using GSAP to animate inline SVG's in my iOS Cordova app. FPS Performance is alright, everything is working fine, but the energy usage of my app is enormous!

 

While debugging this issue with Xcode, I've noticed that it has to do with the SVG animations. A simple pulsing animation of an inline SVG allocates around 80% of GPU power of an iPhone X. The phone is running hot after a minute... If I switch the SVG element with a simple DIV or a canvas tag, the GPU is down to 5%.

The "force3D" property has no influence on this... To rule out that this is a bug with Cordova, I've also tested this in the native iOS Safari browser with the same result.

 

I've read the SVG Gotchas under the SVG-Tips . Sounds like there is no easy solution for this as the browser (or GPU?) calculates each frame.

 

1. Do you have any tips/ideas on this?

2. Do you think it would be better to switch to canvas if possible? I've no experience with canvas. Is it possible to use multiple (a lot) of canvas tags on one page? I'm using SVG's for icons/graphics to adjust colors at runtime.

 

Thank you for any tips!

 

Link to comment
Share on other sites

Howdy @chris_hengst. Yeah, SVGs are resolution-independent which is awesome in many ways, but it also means that the browser must fabricate all the pixels based on vectors (math) and that can be CPU-intensive. That has nothing to do with GSAP, of course - it's just the nature of SVG. 

 

If you're animating the whole SVG element, have you tried just wrapping it in a <div> and animating that instead? That'd likely allow the browser to layerize that element, rasterize it, and just animate those pixels instead of having to re-rasterize things on each tick. 

 

But yes, if you're still running into graphics rendering issues, it'd probably be wise to switch to canvas or even something like PixiJS which can leverage WebGL (SUPER fast). Regardless, you can use GSAP to do all the animations. And yes, you can use as many <canvas> elements as you want. They're cheaper than SVG because the browser just sees a <canvas> as a blob of pixels wheres every SVG element and sub-element is a full-fledged DOM element that dipatches events, etc. Of course drawing stuff on <canvas> is more complex, so I recognize this isn't an easy swap-in by any means. 

 

Perhaps that <div> wrapping trick will work and keep things nice and simple. 

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

? Thank you! I was animating a <g> tag inside of the SVG tag. As I animate the <div> containing the SVG, I do get the same result with much lower GPU usage! I will optimize it this way! Thanks again!

  • Like 3
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.
×