SVG animation is same FPS as anime.JS

[cworf]

So, I have been using anime.js for a while with great results, but I ran into low framerate issues with this particular SVG, so I came here in hopes of finding a solution that was more efficient. Im not sure if this is a problem with chrome, as it is SLIGHTLY better looking on firefox. but here I am in hopes that experts can direct me to the proper solution.

 

To see what im talking about, its best to use as large of a screen as possible, I notice a significant difference on a 4k screen vs 1080p screen. and Ideally this animation will work on full screens up to the newest iMac 5k+ screens.  again its confusing because if all you do is make the browser window smaller, suddenly the animation performs perfectly, so the fact that I'm animating a 2500 point svg file seems irrelevant. my computer is also well endowed with the latest hardware and lots of RAM so there's no way it cant crunch through a simple thing like this. 

 

Im totally stumped as to what to do, I would really like to make this animation work, for reference, the linked pen above only shows one transform (rotateZ) to illustrate that it does not seem to matter how many transform animations I add, the framerate is still the same. the pen below shows you the final animation that I created using anime.JS, which includes multiple axis rotation transforms and color changes. as you can see, there is little difference in framerate from the GSAP rotateZ only.

 

anime.js version ---> 

See the Pen ZEWbozo by BluePeaks (@BluePeaks) on CodePen

 

Very much looking forward to learning. Thanks!

See the Pen BaKorGK by BluePeaks (@BluePeaks) on CodePen

[GreenSock]

Yep, that actually makes perfect sense. This almost surely has nothing to do with the animation engine - it's all about the graphics rendering load you're putting on the browser. Let me explain...

 

SVGs are resolution independent which is GREAT for making things sharp at any size, but that comes at a price - the browser must fabricate all those pixels DYNAMICALLY 60 times per second (in most cases). The bigger the browser window, the more pixels to fabricate and render. The more pixels, the harder it is on the CPU (and GPU). So going from 1080p to 4k is almost quadrupling the load. Strokes are extra tough for browsers to render because it must plot the path and then put half the pixels on one side, and half on the other side. 

 

I bet you'll notice that if you swapped in a raster image (like a png), you'll see MUCH better performance because the browser doesn't have to fabricate all those pixels on every tick - it can just shove the raster image to the GPU and move the big blob of pixels around using transforms (very cheap for a GPU to do).  

 

So even though GSAP is likely faster than Anime in terms of raw animation power/efficiency, it probably won't matter much practically because I'd guess that 99% of the load is on the graphics rendering, not the JS execution. In other words, even if GSAP is TWICE as fast as Anime, you'd only notice an overall boost of less than 1% because JS execution represents a tiny portion of the load. 

 

Does that clear things up?

 

Of course I'd still advocate for using GSAP for a bunch of other reasons (not that there's anything wrong with Anime - it's great for what it was designed to do, at least as far as I can tell from my very limited use). 

[cworf]

Ok WOW... I was not expecting such an awesome response so quickly! This alone makes me want to switch everything over to GSAP. Even though I was already considering it. Damn.

 

I fully understand what the problem is now. So now I just need to discover a solution, if there is one. First  and easiest thing that comes to mind is converting my stroked paths to filled shapes. However I'm intrigued by the png idea but there is no way in hell I'm going to manually render a PNG file for each line given they are each animated dynamically depending on their "elevation". Is there a way to pre-render a separate file for each element before the animation begins? Or do I need to do this myself.

Also, I've never used canvas before, but i seem to remember reading somewhere there is some method of "pre-rendering" an animation outside the visible Dom, then playing it back inside a canvas element. Does that ring a bell? Is this perhaps within the capabilities of GSAP?

Thanks again for your thoughtful and rapid response, I look forward to being a part of this community.

 

[PointC]

Have you looked at three.js?

 

https://threejs.org/

 

Your demo seems like it might be a good fit. Just a thought.

 

[akapowl]

 

Aw man, @PointC, you just beat me there by seconds.

 

Was about to suggest the same.

three.js came to my mind instantly, too, when reading this.

 

@cworf Check how smooth it is. You could set up a scene with your SVG and just animate the camera rotation.

Not SVGs used in the following example (I think), just for example of its smoothness:

 

https://threejs.org/examples/#webgl_interactive_raycasting_points

 

[cworf]

30 minutes ago, PointC said:

Have you looked at three.js?

 

https://threejs.org/

 

Your demo seems like it might be a good fit. Just a thought.

 

perhaps ill look into it, my animation is not actually using any 3d perspective, and just uses 2d transforms and rotations to emulate 3d. but could be worth learning anyways.

[GreenSock]

Yeah, my understanding is that ThreeJS isn't necessarily just for 3D stuff. The point is to leverage WebGL for rendering which is WAAAAY faster than vector stuff that's largely tied to the CPU. Perhaps a canvas library like PixiJS could help too. I've seen some performance demos that are super impressive. But a lot of that may be from raster images where pre-calculated pixels are just being transformed whereas your demo seems to rely on totally dynamic shapes. 

 

In any case, though, you can use GSAP to animate whatever you choose. It'll animate literally anything that JavaScript can touch, not just DOM elements. And there's even a plugin to make some of the PixiJS stuff easier. 

 

Welcome to the community, @cworf - I think you'll like it around here. And hopefully you'll find GSAP to be pleasantly surprising. 

 

Happy tweening!