Jump to content
Search Community

Improve SVG animation performance.

mis8680 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, 

 

I've created a SVG animation with snapSVG + Greensock but I am not happy with the performance. (lagging and etc.)

 

I would like to have any opinion for better performance. 

 

Here is the URL.

 

Thanks in advance. 

 

 

 

Please leave a comment if you need more details.

 

 

Link to comment
Share on other sites

A few comments/tips:

  1. SVG is very hard on the CPU to render (totally unrelated to GSAP). I'd venture to guess that 98%+ of the load in your case is graphics rendering (browser), so there's not much GSAP can do to help.
  2. Avoid filters. They're very CPU-intensive for the browser to render.
  3. Hide any elements that aren't visible in the viewport. I noticed you're zooming in, for example, so maybe experiment with hiding the off-screen elements so that the browser doesn't have to worry about them at all in the rendering pipeline. 
  4. If performance is still unacceptable, you might want to try using canvas/PixiJS because they're much faster at rendering in most cases than SVG. 
  • Like 1
  • Haha 1
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.
×
×
  • Create New...