Search code examples
animationweb-animations

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


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?


Solution

  • 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?