Jump to content
GreenSock

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

Improve performance on multiple SVG paths

Recommended Posts

Hi there,

 

Is there a way to improve the performance on an SVG with hundreds of paths animating at the same time?

 

If that's not possible, a solution to animate less paths would be good, but I've not found a solution to that yet unfortunately. For example to only animate the paths closer to the mouse cursor.

 

Any help with this would be greatly appreciated.

 

Thanks

See the Pen zYdgBYZ by jeffceriello (@jeffceriello) on CodePen

Link to comment
Share on other sites

That's asking a LOT of the browser to render all of that dynamically as vectors. I'm not at all surprised that performance is suffering. And to be clear, it has nothing to do with GSAP. I'd bet that less than 1% of the load is GSAP - the rest of graphics rendering. Also, I'd use overwrite: true instead of "auto" because it's cheaper. There's no need to do a pupil.forEach() to create a bunch of gsap.to() calls - just do a single gsap.to(pupil...) call (you can pass in multiple elements as the targets (Array). 

 

I'd recommend that you consider switching to something like PixiJS instead of using SVG. It'll render way faster but it is more work to set up. 

Link to comment
Share on other sites

Hi Jack, thank you for your reply. From your experience, would implementing something like

 

this 

See the Pen KRJmey by biblos (@biblos) on CodePen

 

 

or this 

See the Pen RwGGmVv by mikeK (@mikeK) on CodePen

 

improve performance or would it still be a performance killer on that specific SVG?

 

I'm not really good with 2d renderings and math operations so recreating the SVG on a canvas would be an impossible task for me.

 

Thank you

 

 

 

Link to comment
Share on other sites

3 hours ago, eviljeff said:

improve performance or would it still be a performance killer on that specific SVG?

 

SVG is the slowest medium to use for animations. SVG < HTML < Canvas < WebGl.

 

3 hours ago, eviljeff said:

I'm not really good with 2d renderings and math operations so recreating the SVG on a canvas would be an impossible task for me.

 

You're already doing the math, and SVG is a 2d rendering, so it's not going to be a big jump. Check out PixiJS. It's pretty ease to use and is very easy to animate with GSAP.

https://pixijs.com/

 

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.
×