Use CSS to massively speed up animation

[SamMorrowDrums]

The abstract is set out here. I've not looked at the viability of this for C3 yet, but Kahn Academy have got major performance enhancement using this method. Leveraging CSS animation to get full use out of the browser GPU rendering and other optimisations, while working with SVG.

This is related to #172, but it is a specific idea, so I thought it should be looked at as a specific issue, and then either adopted or closed by itself.

I might add, that I have had some serious issues with C3 and performance, in data heavy apps. While this isn't a problem for drawing an individual chart on a page. Pages with multiple complex charts need all the help they can get.

Anyway, hopefully this suggestions is interesting and educational, even if it isn't practical for C3 :-D

[masayuki0812]

Thank you for your information. It's interesting actually, but it seems difficult to apply to c3 because it's possible to wrap each svg element by html element (e.g. div). So please let me close at this moment. Thanks!

[aendra-rininsland]

@masayuki0812 It's actually super easy; see: http://plnkr.co/edit/y6MObOBUBQkx1pc3PQ6K — the fact you've given each chart element its own class makes implementing any kind of CSS transition really straight forward.

You could even add animate.css as a dependency to let users easily choose transition style as an option (though some of them look really silly — try replacing fadeInUpBig on ln. 16 with swing or tada for some lulz).

I'm reopening this because the performance boost from using CSS transitions is pretty substantial and this is really relevant to issues #172, #169 and probably others. arnovr/ocusagecharts and Locu/chronology (in addition to my own project, times/axisJS) all use C3 to display large amounts of data, and future adoption of C3 as a dependency might be hindered if the animation is causing performance issues. I'm happy to write a pull request redoing all the existing animations as CSS transitions if there's an appetite for it.

That said, please feel free to reclose if you disagree; am not trying to be argumentative! 😅

[masayuki0812]

Oh.. I didn't understand well. Your plnkr looks nice and I agree it could be a solutionof the performance issue. So, let's keep open. Thanks.

[astroanu]

Thank you so much. I guess this is a good solution for bar animations. 👍