How do you check if webanimation API is supported in the browser?

Question

Is there a way to check if a browser supports the webanimation API so that we don't need to load the webanimations polyfill?

The documentation on github talks about Element.animate and Playback Control. I can check for $0.animate on an element but I'm not sure how to check for Playback control. Is this the accurate way to check if we need the polyfill?

brianskold · Accepted Answer · 2016-06-24T04:54:37.257

If Element.animate is present, I think it's reasonable to assume playback control is too.

Chrome initially shipped Element.animate support in Chrome 36. It added playback control in Chrome 39 which has been shipping for a long time now (current Chrome is 51).

Firefox will ship Element.animate including playback control in Firefox 48 (currently in beta).

I don't expect either Safari or Edge will ever ship Element.animate without playback control.

However, there are other features that are part of the spec that are not shipped by any browser yet such as the finished promise, the effect attribute, or additive animation (although some of these features are available in Firefox Nightly/DevEdition and Chrome Canary). If you are relying on any of these features then you might still need the polyfill.

Also, the polyfill should fall back to the native implementation when available, but I suppose you are trying to avoid downloading the polyfill altogether?

Yes, thanks. I'm trying to collect data on how many users support Element.animate and also only trying to load it when necessary. — Andreas Galster, Jun 16 '16 at 17:07

score 1 · Answer 2 · answered Nov 07 '16 at 15:18

1

To add to @brianskold response - I used:

if ('animate' in elementToAnimate) {
 // do something
} else {
 // fallback code 
}

This works in Chrome & Firefox and falls back if it's not supported!

answered Nov 07 '16 at 15:18

Deano

2,600
2
26
40

score 1 · Answer 3 · answered Jun 27 '18 at 20:09

There is no secure way for checking since some browsers may not fully implement the API but still implement Element.animate.

Instead of checking you might want to use a polyfill instead which falls down to the API if present.

This polyfill project might fit your needs. I used it for several projects and am satisfied with it: https://github.com/web-animations/web-animations-js

How do you check if webanimation API is supported in the browser?

3 Answers3