Jump to content
GreenSock

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

Over 400 svg elements performance

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 made a little animation with gsap, and i really like how easy it is.

But while it look great on y computer (gtx 1080), my coworker has heavy performance issues (imac 2007).

Be both use the same browser (chrome), and he has better performances with last firefox build.

 

I saw some people switching to canvas/paperjs, but i look like painfull.

 

I'd like to know if the performance issue is about the number of animated elements (~432) or the way i build the timelinemax (in loop).

Here is the pen : 

 

Thanks

See the Pen XVbGvY by kaliel (@kaliel) on CodePen

  • Like 1
Link to comment
Share on other sites

Yup it is due to number of elements, switching to canvas will greatly improve performance. Check following thread,

 

 

Instead of looping you can use function that will return random values, but still what you are doing is too much for Firefox. I had to force close it multiple times and in the end edited using Chrome.

 

See the Pen RxPmNg?editors=0010 by anon (@anon) on CodePen

 

  • Like 6
Link to comment
Share on other sites

Thanks for your advice Sahil.

I'll take a look  at paperjs/pixijs /native canvas API :)

Link to comment
Share on other sites

Hello @kaliel and Welcome to the GreenSock Forum!

 

Keep in mind that when using SVG that it can only animate using 2D transforms natively. When SVG 2.0 comes out then SVG will be able to animate using 3D transforms and use hardware acceleration. You could always wrap each SVG element in a <div> tag and then take advantage of 3D transforms. But even at a certain point 3D transforms on hundreds of DOM elements will cause that jank (lost frames) your seeing now with SVG elements. So until then you would have to use Canvas / WebGL to get smooth animation with hundreds or thousands of elements.

 

Happy Tweening! :)

  • Like 6
Link to comment
Share on other sites

Thank you jonathan for pointing me in the good direction

Link to comment
Share on other sites

Hi @kaliel

 

Since you're not animating anything that would require an element to be redrawn, converting this over to PixiJS would be pretty easy. You're SVG could be used like a sprite sheet, which is good. 1 graphic is much better than 400+ graphics. 

 

I can show how to do that later, but you'll be able to animate 10,000 objects without skipping a beat. Press down to add more bees. That's running without using a particle container, which would make it even faster.

 

See the Pen ORJjGj?editors=0010 by osublake (@osublake) on CodePen

 

 

 

  • Like 7
Link to comment
Share on other sites

Nice,

Do you mean a png or jpg sprite sheat ?

Link to comment
Share on other sites

8 minutes ago, kaliel said:

Nice,

Do you mean a png or jpg sprite sheat ?

 

Yep. When drawing on canvas, everything gets converted to a bitmap. But's done internally, so you don't need to worry about that. Before loading your SVG into pixi, you just need to loop through all the different elements you want to want use, record their bounds, and pass that into pixi so it can map out where everything is located on the bitmap.

 

  • Like 1
Link to comment
Share on other sites

6 minutes ago, OSUblake said:

 

Yep. When drawing on canvas, everything gets converted to a bitmap.

 

Thanks a lot, i didn't know that, even it's a bit sad to convert vectors into bitmap :/

I will dig in pixiJS :)

Link to comment
Share on other sites

On 12/15/2017 at 8:15 AM, kaliel said:

Thanks a lot, i didn't know that, even it's a bit sad to convert vectors into bitmap :/

 

Your monitor is a bitmap display, so everything is converted to a bitmap at some point. SVG are resolution independent because the browser automatically redraws the SVG as a bitmap every time its size changes. We can do the same thing with canvas, but the redrawing doesn't happen automatically, which can help with performance. So you'll still be able resize it, but it's not something that needs to be done 60 times/second.

 

  • Like 4
Link to comment
Share on other sites

Hi @kaliel

 

I didn't forget about you. I'm going to try and get around to making a version using PixiJS later today.

Link to comment
Share on other sites

Hi @OSUblake

 

I came with something with PixiJS but it's weird.

I parse the svg, ang get all elements (path, and group) positions with 

getBoundingClientRect()

 

Then i used PIXI.Rectangle to have tiles of my SVG texture but it's too "square" and it bring some weird stuff. I'll try to post on codepen. Thanks for helping me :)

Link to comment
Share on other sites

33 minutes ago, kaliel said:

Hi @OSUblake

 

I came with something with PixiJS but it's weird.

I parse the svg, ang get all elements (path, and group) positions with 


getBoundingClientRect()

 

Then i used PIXI.Rectangle to have tiles of my SVG texture but it's too "square" and it bring some weird stuff. I'll try to post on codepen. Thanks for helping me :)

 

Oh, nice. I really didn't describe the process, but it sounds like you figured some stuff out, like using PIXI.Rectangle. 

 

I'm just going off the top of my head here, but I think you should use getBBox() instead of getBoundingClientRect(). That should allow you to scale the dimensions correctly.

 

And the size of your svg/viewBox should probably be the same as the bbox of your typo element. Ideally, you want everything starting in the top-left corner, but your SVG isn't set up like that. I'll have to see about making an adjustment for the x and y values.

 

SVGRect {x: 179.45834350585938, y: 233.4530029296875, width: 440.5416564941406, height: 133.09402465820312}

 

 

  • Like 1
Link to comment
Share on other sites

Hi @kaliel

 

I was in the middle of making a demo for you, when I noticed a problem, so hopefully you can help me out.

 

I modified the SVG from your demo so everything is positioned in the top-left corner, and that works great. But I need another SVG. The problem is that most of the logos are so close together, that the frames are overlapping, so the edges of others logos are visible in a lot of the sprites.

 

You can see what I have so for. It's more noticeable on the larger logos. And I still have a little work to do, like making it responsive, but the performance gains should be pretty obvious.

 

See the Pen 07d4a9dbbbb116fef2f93fe1fcd787a7 by osublake (@osublake) on CodePen

 

So I need 2 svgs. The current one, with everything in the final 2018 position, and one where the bounding boxes of the different logos won't overlap with each other. How that is setup really doesn't matter. I just need to be able to cross reference the positions for each element on the different SVGs. Ideally, the data from that could just be converted into something like a json file so you don't have to parse the SVG at runtime.

 

cc @alaric I'm still going to get to your SVG doing something very similar to this using, so I'm thinking I will need the same thing from you.

 

 

  • Like 2
Link to comment
Share on other sites

Oh my... I ended making a little tool to help because I have no idea how to make a sprite sheet in Illustrator. If anybody knows, please let me know.

 

This outputs all the magical numbers I need to make it work in PixiJS.

 

See the Pen goWpVy by osublake (@osublake) on CodePen

 

 

 

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

×