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!