Canvas Animation Loop: Sanity Check

[Mark Harris]

Hey all,

 

Wanted to get  a quick check on a theory. I have a canvas animation running, which displays a series of about 50 nodes, and has "webs threads" running between the nodes. It all has the feel of synapses in a brain and looks super cool. It's done as canvas animation because using something like d3 caused performance problems.

 

I would rather not move to something like Easl, as all of the canvas code has already been written. I would have to translate it all to "stage".

 

But, I would like the "nodes" to be DOM elements, so that I can more easily control content within them. I have been using absolute positioned divs, and updating their positions in the animation loop to match the canvas nodes with TweenLite.to(). This works beautifully with a few nodes on screen, but dogs down if I zoom out to see all 50 nodes at once. I guess it's to be expected.

 

My question is: Is this an insane thing to do with TweenLite? Or is it pretty okay to let it constantly update position in an animation loop 30FPS. Or is there another technique I can use with TweenLite to get all 50 nodes to perform better?

 

Sorry i cannot go into more detail about the project, but I think I've given enough to describe the basics.

 

Thanks!

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Well it all depends on a series of factors. 50 elements is not much, but it could be too much depending on size, transparency, background, etc. Jack has stated quite a few times that the major bottleneck in animations is browser rendering and not GSAP. Unfortunately there's not much it can be done in those cases.

 

One thing you could try is pass the animations to the GPU using force3D:true in your tweens. Like that you take some burden of the browser and add those items to GPU layers. Be careful though, if you pass too many elements to the GPU it'll backfire and hurt performance instead of improving it.

TweenLite.to(element, time, {vars, force3D:true}); 

Another thing is that you're working on canvas, have you tried KinecticJS and GSAP Kinectic plugin. I mention it because it, because the plugin has the ability to update each layer independently of the rest, so instead of updating the whole canvas it goes to the specific element and it's layer, perhaps you could check it out and see if it helps.

 

Finally GSAP works on top of the requestAnimatioFrame method, which updates 60 times per second, so the engines rate is 60FPS unless you want to specify something different. If that's the case you can do it like this:

// in your case someNumber could be 30
TweenLite.ticker.fps(someNumber)

Although I don't know if reducing the FPS will improve performance. You'll have to check the repaints and rendering times via developer tools in Chrome, in order to get a good idea of how long those are taking, specially when you have all the elements in the viewport.

 

Rodrigo.

[Mark Harris]

Thanks for the reply, it's a big help. Will post a link when the project launches.

[Mark Harris]

Hey there Rodrigo, just wanted to pop back in, now that the project has launched. Greensock was a big help, as was your post.

 

The project is here: http://futurestates.tv It's a fun and rich future story world to explore.

 

This is another cool project I used GreenSock JS on this Spring: https://www.immigrant-nation.com

 

Enjoy!

 

M

[Rodrigo]

Hey Mark,

 

The future story is quite amazing, excellent job!!!. I didn't look at it completely but I will during the weekend.

 

The immigrant page is great too. Had a lot of fun reading those people's stories.

 

Is great to see the engine running so well and helping such great projects!!

 

Happy Tweening!!