Jump to content
Search Community

Optimizing the Rendering of a Large, Bloated SVG

Sasquiche 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 everyone!

 

I had hoped to unveil this animation to you all when it was completed and running smoothly. Thanks to the the shear volume of detailed answers on this forum and the amazing community of contributors behind it, someone who has no experience with JS , HTML, or even CSS can learn without even asking a question. You should all know how amazing your contributions to this forum are, and I hope this conveys the genuine appreciation from this lurker/beginner.

 

I think it was Craig who said that he started learning JS by copying and pasting, well thats exactly how I learned to make this animation. It's a bit of a Frankenstein's monster, but I understand what I built. Unfortunately, I will have to interrupt my gushing to also add a question. 

 

Although my SVG animates exactly how I want, the rendering is obviously jittery. From what I can tell this is in large part due to the strain put on the browser attempting to render:

  1. ALL these filters and alpha changes
  2.  48 objects simultaneously

See the Pen MLdaWg by Sasquiche (@Sasquiche) on CodePen

What can I do to optimize the rendering efficiency of my animation?

 

As far as I've read from this forum and outside sources I have a few options:

  • Slim down and clean up my script. (However, this doesn't fix the rendering problems)
  • Combine GSAP with another js rendering library like three.js or pixi.js (This would fix the rendering strain on the browser. But where to even begin? Also from what I gather rendering SVG paths in WebGL is more challenging, as the WebGL API is primarily built for rendering many triangles.)

I understand if what I'm asking might be outside the scope of GSAP.

 

Still a thank you is necessary for getting me to this point.

See the Pen MLdaWg by Sasquiche (@Sasquiche) on CodePen

  • Like 2
Link to comment
Share on other sites

Welcome to the forums, @Sasquiche! I love hearing how much you've learned just by lurking in the forums. Congrats on making your first post here :)

 

Yeah, I think the thing that's really hurting performance here is the SVG filters. Those just take a lot for the browser to render. Strokes can actually be difficult too, but not nearly as much as filters. If you get rid of those, does it run much better for you? 

 

I imagine that something like Pixi.js would indeed perform a lot better. But of course it's more kb and more to learn. I wish I had a silver bullet for you. A lot of this could probably be done directly in canvas, but again, there's a learning curve. 

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

No, this was what I expected. I'd say its a relief to hear that the filters are the cause of the performance drop off.  

 

34 minutes ago, GreenSock said:

A lot of this could probably be done directly in canvas, but again, there's a learning curve. 

 

I'll have to take it one step at a time then. Any good starting point combining GSAP and a WebGL renderer? 

Link to comment
Share on other sites

14 minutes ago, Sasquiche said:

I'll have to take it one step at a time then. Any good starting point combining GSAP and a WebGL renderer? 

 

Not really - it's not something I deal with often, but Pixi.js is the first thing that comes to mind. Their site has tons of examples and pretty good docs. 

  • Like 3
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...