Web-animate NPM

Web Animate

A lightweight polyfill for the Web Animations API. (WAAPI)

This project aims to provide a lightweight polyfill to WAAPI that leverages CSS Keyframes and does not call requestAnimationFrame on every frame.

How to use

This library automatically polyfills on browsers without Element.prototype.animate(). There are a few functions that can be called manually however:

// force rendering of CSS keyframes immediately
WebAnimate.forceRender()

// call animate directly
WebAnimate.animate(el, keyframes, timing)

// manually replaces animate()
// Call only if you want to forcibly overwrite Element.prototype.animate()
WebAnimate.polyfill()

// use this to determine if the animate() has been overridden
if (WebAnimate.isPolyfilled()) {
    // do something
}

Setup

Include this in your head:

<script href="https://unpkg.com/web-animate/dist/web-animate.min.js"></script>

Or download with npm and import this in your entry js file:

npm i web-animate -S

import 'web-animate'

Demos

Web Animate Playback Controls

Contributions

Contributions are welcome. Please create an issue prior to adding a Pull Request. See below on how to run this project locally.

How to get the project running locally

Install NodeJS / NPM
Clone this project
Run npm install in the directory
Run npm start. This will build to the lib directory and simultaneously run all test files in the tests directory.
Alternately, run npm run test:watch to only watch tests, or npm run build:watch to only watch src files