[Canvas Animation Loop: Sanity Check]

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

[Canvas Animation Loop: Sanity Check]

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

[Canvas Animation Loop: Sanity Check]

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!