Migration from SMIL to Web Animations API

[gionkunz]

As we know from the warnings on the console and a google mail group from the chrome dev team, SMIL will be deprecated in Chrome and Opera. There is no clear timeline yet, but a clear warning on the console (which in my view is just painful).

• look into migration possibilities
• browser / support , polyfill
• Missing features (shape morph)
• Performance (attribute animation)

[ilanbiala]

@gionkunz any progress on this? Web Animations should also allow us to do more stuff, no?

[DaneNutting]

Just adding my interest in seeing this sorted, thanks.

[miletbaker]

You can use CSS animations now, just apply a class to the SVG element in the draw event handler and you can animate using standard css animation, for example to animate the donut chart (note this doesn't animate in sequence but could do), I use the following:

chart.on('draw', function (data) {
    if (data.type === 'slice') {
        data.element.addClass("animated-slice");

        // // Get the total path length in order to use for dash array animation
        var pathLength = data.element._node.getTotalLength();
        //
        // // Set a dasharray that matches the path length as prerequisite to animate dashoffset
        data.element.attr({
            'stroke-dasharray': pathLength + 'px ' + pathLength + 'px',
            'stroke-dashoffset': -pathLength + 'px'
        });

    }
});

Then my css is as follows:

.animated-slice {
    animation: dash 1s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

[rstudner]

For me, trying to use the above code still causes all my donut graphs to render instantly.

[natebeaty]

It worked great for me. Not sure if this is what you mean, but It will animate right away unless you add animation-delay, or if you add the class with a js timeout or when a waypoint triggers (what I'm going to use).

This really should be in the docs next to the SMIL example, especially since the official animation example code causes a console warning. I had to dig around quite a bit to find this inside an issue response.

[Avcajaraville]

@miletbaker I know you posted your comment like 2 years ago, but Im really struggling on how to sequence this :D

Would really love any hint or help here, as all my slices get that class and thus, being animated at the same time, instead of in sequence.

[miletbaker]

@Avcajaraville unfortunately I've not used Chartist for some time we swapped it out for Highcharts over a year ago as we needed some of the features it provided in our app, sorry.

It used to be pretty easy to add a class and then use css animation as above but it was a long time ago. Hopefully some of the others that used the above approach and still using Chartist can help?