Jump to content
Search Community

High CPU usage on SVG opacity animation

okconsumer test
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

I've got this relatively simple animation that I'm having a lot of trouble getting to a performant state. Initially, I tried this with keyframe animation in css and found the CPU performance to be horrible so I tried it with greensock tween max, but I'm experiencing similar sorts of issues. There around 20 elements on the page that are getting opacity animated with an easeInOut. 

 

I'm on a 2.2 GHz Intel Core i7 and seeing a 30-50% CPU usage on the tab within chrome task manager.

 

 

 

See the Pen YQQVam by okconsumer (@okconsumer) on CodePen

Link to comment
Share on other sites

SVG animations can be very CPU intensive, but I see no reason for that one to be so high. I'm getting around 1-3% CPU usage in the task manager.

 

You might have some type of Chrome extension messing with it. And have you tried running it in Opera? It should render the same as Chrome.

  • Like 1
Link to comment
Share on other sites

Hm. I'm not seeing crazy high CPU either. And yeah, like Blake said, SVG can be CPU-intensive (which has nothing to do with GSAP - it's just that SVG is resolution-independent, so the browser has to fabricate the pixels on every tick). Whenever I see someone struggling with graphics rendering performance in SVG, I suggest that they consider trying PixiJS which is a canvas-based library. It's heavier and probably a bit more difficult to get up and running, but rendering speed is CRAZY fast in most cases. Blows the doors off of SVG (at least for anything complex). 

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