Jump to content
GreenSock

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

Performance Issue

Recommended Posts

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

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

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