[squared9]

Just a question - why don't you use SVG SMIL animation? It's perfectly fluid, HW accelerated, has declarative animation transforms, allows easings, draws in its local coordinate space, you can add interactive JavaScript events etc.

http://www.w3.org/TR/SVG/animate.html

[spicyj]

Historically, our interactive diagrams rendered to VML for IE8 support in addition to the SVG used by modern browsers, so we couldn't use any SVG features that aren't shared by VML. We no longer support IE8, but our code is still mostly built around this assumption so it's nontrivial for us to take advantage of any native animation support. (In addition, these aren't animations per se; rather they're cases where we move elements of a diagram in response to a touch interaction, which (I believe) requires JS to power it regardless.)

[progers7]

SMIL is not perfectly fluid. SMIL is not inherently hardware accelerated. SMIL animations are slower than the same animations driven from JS in all major browsers except IE which doesn't support SMIL but does support JS. As the OP showed, JS animations are the way to go for SVG.

[squared9]

My experience says otherwise, SVG SMIL tends to be 10-20% faster with lower CPU load in recent browsers (Chrome/FF/Safari) than a JS-driven animation. YMMV though.

[ygra]

One might argue that an animation that doesn't even play is infinitely slow ;)