javascript - Animate Chartist on show -

i features of chartist: https://gionkunz.github.io/chartist-js/

but chartist animate pie chart in same cool way chartjs when chart shown, this: http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html

i read can somehow add css anims chartist, can't figure out how.

this provided in chartist using smil - http://gionkunz.github.io/chartist-js/examples.html#svg-path-animation.

while work in chrome - you'll need shim ie - svg animation not working ie9/ie10

---

here rather silly bounce implementation (it looks more pacman, should easy enough figure out right reverse , durations little trial , error; or cheat , check out easeoutbounce implementation in chart.js code)

var data = {     series: [5, 3, 14] };  var chart = new chartist.pie('.pie', data, {     donut: true,     donutwidth: 194, });  chart.on('draw', function (data) {     if (data.type === 'slice') {         // total path length in order use dash array animation         var pathlength = data.element._node.gettotallength();          // set dasharray matches path length prerequisite animate dashoffset         data.element.attr({             'stroke-dasharray': pathlength + 'px ' + pathlength + 'px'         });          // create animation definition while assigning id animation later sync usage         var animationdefinition = {             'stroke-dashoffset': {                 id: 'anim' + data.index,                 dur: 500 * data.value / data.totaldatasum,                 from: -pathlength + 'px',                 to: '0px',                 // need use `fill: 'freeze'` otherwise our animation fall initial (not visible)                 fill: 'freeze'             }         };          // if not first slice, need time animation uses end sync event of previous animation         if (data.index !== 0) {             animationdefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';         }          // need set initial value before animation starts not in guided mode         data.element.attr({             'stroke-dashoffset': -pathlength + 'px'         });          // can't use guided mode animations need rely on setting begin manually         // see http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate         data.element.animate(animationdefinition, false);          // add (naive) bounce         if (data.endangle === 360) {             var index = data.index;             var dur = 1000 * data.value / data.totaldatasum / 2;             var = 0;             var = -pathlength / 3;              (var = 0; < 4; i++) {                 data.element.animate({                     'stroke-dashoffset': {                         id: 'anim' + (index + 1),                         dur: dur,                         from: + 'px',                         to: + 'px',                         fill: 'freeze',                         begin: 'anim' + index + '.end'                     }                 }, false);                  index++;                 dur /= 1.75;                  var t = from;                 = to;                 = t / 2.5;             }         }     } });