Improve performance on multiple SVG paths

[eviljeff]

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

[GreenSock]

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. 

[eviljeff]

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

 

 

 

[OSUblake]

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/