Performance with DrawSVGPlugin

[Kenner Stross]

First, let me apologize for not having a codepen, but this is an issue deeply enmeshed with a large body of code, and I don't believe it's something I could recreate on codepen. So... I'll just hope that you might have some advice to share.

 

I am using the DrawSVGPlugin to do this type of animation: Imagine a grid of cells on the left half of the screen (a 13 x 13 grid). Emanating from some of those cells are little snake-like, squiggly lines that seem to flow over and into a point on the right side. Each of the squiggly lines is an svg path, and I'm using DrawSVG to go "0% 100%" so the snakes emerge and start moving across the screen, and then "100% 100%" to make them look like they are all arriving and finishing up (being swallowed into, sort of) that final end point. It works GREAT!

 

But... it works great only if I don't have too many snakes coming out of too many cells. It seems (???) that if I have a whole bunch at once (it could be as many as all 169 cells are emitting at once), everything goes haywire: jerky; screen flashing; portions of the grid itself going blank and coming back; other portions disappearing; the screen not responding; snakes flashing on and off; etc. Totally haywire. It would seem like maybe I've crossed some sort of threshold of what gsap can handle and/or the browser can handle and/or some memory limit or ???

 

I don't really know how to structure my question, so I guess I'll just ask if anyone has general advice re: the performant use of svgs, performant use of the DrawSVGPlugin, limits and thresholds I should be aware of, Chrome debugging tips (I'm not particularly expert in that area), etc. Anything would help.

 

Thanks in advance.

[Kenner Stross]

Oh... and I should mention that the paths are bezier curves.

[ZachSaucier]

Hey Kenner. Without being able to see the page ourselves it's pretty hard to give good feedback. My favorite article about SVG performance is this one. It sounds like you might have too many elements animating at once for the browser (not GSAP - GSAP can handle much, much more than what you have). You might be able to get better performance by simplifying paths or trying to reuse paths somehow. Overall this sort of thing with lots of element animating is generally a better job for canvas.

[Kenner Stross]

Thanks, Zach - the svg performance link gives me much to think about. Regarding canvases: I'm not really familiar with them. Before I spend any time investigating, I just want to make sure that canvas + gsap are compatible; I assume so. If have any canvas links you find useful, please don't hesitate to share.

[OSUblake]

 

4 minutes ago, Kenner Stross said:

Regarding canvases: I'm not really familiar with them. Before I spend any time investigating, I just want to make sure that canvas + gsap are compatible; I assume so. If have any canvas links you find useful, please don't hesitate to share.

 

They definitely work together, but canvas is not easy to learn if you've never done graphics programming before. And animating strokes probably won't be much faster in canvas either. 169 snake animations is going to be taxing with any medium. You're probably better off rethinking your animation.