Performance Issue

[WilliamBay]

Working on a project right now and experiencing some performance issues https://kelvindev.wpengine.com/

The animation is in the hero section of the site. It's two SVG spiral shapes that loop infinitely through all the paths and change the opacity of each.

I have a simplified version of this at 

When the animation is enabled, it has a pretty significant impact on the rest of the site. Scrolling is glitchy. The next section has a scroll triggered animation which is very choppy.
I'm wondering if it's just too many paths (about 75 paths make up each SVG) to be animating, or if there's something that can be done to improve the performance.

See the Pen bGLepWP?editors=0110 by bahia0019 (@bahia0019) on CodePen

[OSUblake]

59 minutes ago, WilliamBay said:

I'm wondering if it's just too many paths (about 75 paths make up each SVG) to be animating, or if there's something that can be done to improve the performance.

 

If animating that many paths is slow, you'll probably have to switch to faster rendering technique, like using HTML5 Canvas or WebGL.

 

[WilliamBay]

On 5/10/2022 at 3:20 PM, OSUblake said:

 

If animating that many paths is slow, you'll probably have to switch to faster rendering technique, like using HTML5 Canvas or WebGL.

 

Thanks @OSUblake. Appreciate the response. It doesn't look like the animation is running here in the embedded Pen. Not sure if you had a chance to see the full Codepen. But I'm wondering where I might get started.
What I have right now is SVGs exported from vectors in Illustrator. I'd need to figure out how to make the jump from that into the WebGL world. Any suggestions on where to start?

Thanks!
William

[OSUblake]

Well, there's really no easy entry into the world of canvas programming. It's just one of those areas that takes time to build up skill with, but we might be able to work through this together.

 

The first thing we need to do is to reduce the number of paths. I can't tell, but is it the same path being drawn over and over again, but at a different rotation and size/scale? If we could narrow that down to single path, that really help improve canvas performance. While canvas is faster than SVG, it's not a silver bullet, and does require a lot of careful programming to optimize.