Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vonwelzen

CPU usage intense for animation

Recommended Posts

Hi all,

 

We made an animation for our new website (check codepen) and notice extreme high CPU load when displaying the animation. We tried simplifying the animation but it didn't really work. Any tips or advice on how to lower the cpu usage because we know svg animation is a high on cpu but on slower pc's it sounds like we are going to take off :D

Any help is appreciated!

 

https://cdpn.io/Vonwelzen/pen/ZEbNrLX

Link to post
Share on other sites

Hey Vonwelzen and welcome to the GreenSock forums! 

 

The limiting factor here is not the actual animation code, it's what you're animating. Your SVG is pretty massive and has a good bit of (I'd argue unnecessary) detail. My favorite article about SVG performance is this one as it's concise and covers a lot.

 

If I were tasked with animating this, I may try using a single background image for everything that's not moving, a different but single simplified or even raster image for the astronaut, then handle the flag waving and the shadow animations. 

  • Like 3
Link to post
Share on other sites

Hi Zach, Thanks so much for you  advice. If I understand correctly you would use raster images(jpg/base64) for background and astronaut and then animate the flag + shadows. Wouldn't this give us trouble with scaling/responsivness? Also load time would increase on the website because of the use of the extra bytes the images have.

What I don't understand is does the SVG  code load once or does it load entire background each frame of the animation? Isn't it possible to load svg code for background once then just render the animations becasue I feel like other websites don't have the big load on cpu where i also see detailed animations like this one: https://www.posh.tech/

Thanks so much for your reply and the link realy helps!

Link to post
Share on other sites
4 minutes ago, Vonwelzen said:

If I understand correctly you would use raster images(jpg/base64) for background and astronaut and then animate the flag + shadows.

I said that's an option. What likely makes the most sense (what the site you link to does) is putting the static SVG images inside of an img tag. The only real down side is that you can't animate have full control over the individual pieces of the SVG if its in an img tag.

 

6 minutes ago, Vonwelzen said:

Wouldn't this give us trouble with scaling/responsivness?

That depends on how you set it up.

 

6 minutes ago, Vonwelzen said:

load time would increase on the website because of the use of the extra bytes the images have.

Maybe some but if you optimize them and use different images for different viewports it's not too bad.

 

7 minutes ago, Vonwelzen said:

does the SVG  code load once or does it load entire background each frame of the animation?

It loads once. But animating a bunch of elements (especially with gradients) can be intensive with SVG.

 

8 minutes ago, Vonwelzen said:

i also see detailed animations like this one: https://www.posh.tech/

If you use your dev tools you can see that their approach is very different than the one you have in the pen above. I recommend using an approach similar to this site.

Link to post
Share on other sites

Hi Zach,

 

Thanks so much for your advise we are going to work on this and get back to this forum with solution if we find it maybe it will help someone else :)

Link to post
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.

×