Animate.web

Animate.css animations ported to Web Animations API.

DEMO and its source code.

Properties in animations keyframes are sorted according to a convention:

First goes offset property (if present), then easing (if present), then composite (if present), then animatable CSS properties in alphabetical order (with exception of cssOffset which is sorted as if it was offset).

Options are sorted alphabetically.

Install

$ yarn add animate.web

or

$ npm install animate.web

Usage

Import:

import animateweb from 'animate.web'

Or load from CDN:

<script src="https://cdn.jsdelivr.net/npm/animate.web@latest/dist/animate.web.js"></script>

If you need only one or several animations it is possible to load them individually via CDN. For example, if you only need bounceIn, flash and flip:

<script src="https://cdn.jsdelivr.net/npm/animate.web@latest/dist/bounceIn.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animate.web@latest/dist/flash.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animate.web@latest/dist/flip.js"></script>

When loading from CDN a global variable animateweb is added to the scope. If you load the full bundle animateweb contains all the animations from the package. If individual animations are loaded it contains only them.

Assign a selector to the element(s) you want to animate:

<div id="animation">Animate me!</div>

Create animation with default options:

const animation = document.querySelector('#animation').animate(animateweb['bounceIn'].keyframes, animateweb['bounceIn'].options)

Or apply any custom options if you need. Full list of available options here

For example, change duration to 3 seconds and play it infinitely:

animateweb['bounceIn'].options.duration = 3000
animateweb['bounceIn'].options.iterations = Infinity
const animation = document.querySelector('#animation').animate(animateweb['bounceIn'].keyframes, animateweb['bounceIn'].options)

After being created the animation will play immediately. If you want to prevent this use cancel() method right after the creation:

const animation = document.querySelector('#animation').animate(animateweb['bounceIn'].keyframes, animateweb['bounceIn'].options)
animation.cancel()

Use all available properties, methods and event handlers of the animation. Full list here

For example, play animation on click:

<button onclick="animation.play()">Play</button>

Categories

Animations are sorted into categories via animateweb.categories property that allows infinite levels of sub-categories.

animateweb.categories is an object of "key: value" pairs where value can be either true or object itself.

If value === true, then key is the name an animation. If value is an object (not an array) then key is the name of a sub-category. Each sub-category is the same object of "key: value" pairs structure, so they can be infinite.

To view an example of how you can create expandable menu from the categories object search for categories-menu in demo source code. It is written as a recursive Vue component.

Development

Build the bundle for browsers into ./dist folder:

yarn build

Rebuild the bundle when its source files change on disk:

yarn watch

Lint:

yarn lint

Fix linting and style errors:

yarn fix

Update dependencies:

yarn up

Generate changelog based on commit messages:

yarn c

To use the above command conventional-changelog-cli must be installed globally. Follow the recommended workflow.

Testing

yarn test

Source

Tests check integrity of animations and categories and make sure that all animations keyframes and options contain only allowed attributes.

Here's what is checked:

1. Animation name is a valid filename.
2. Each keyframe of each animation contains only alowed attributes, that is one or more of animatable CSS properties and (optionally) offset, easing, composite.
3. Attributes are sorted according to the convention (see above).
4. offset attribute (if present in a keyframe) is a number between 0 and 1.
5. offset attributes (if present in several keyframes) are in ascending order.
6. easing attribute (if present in a keyframe) is a valid CSS easing-function.
7. composite attribute (if present in a keyframe) is a valid KeyframeEffect.composite operation.
8. Animation's options are valid WAAPI timing properties.
9. Animation's options are in alphabetical order.
10. The first and last keyframes contain all animatable properties used in animation. If they don't you get Uncaught DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported. in Chrome or NotSupportedError: Animation to or from an underlying value is not yet supported. in Firefox. Starting from Firefox 75 such cases do not trigger errors anymore. So if other major browsers also implement this feature, this part of the tests will be removed in the future.
11. Every animatable CSS property has a valid value.
12. Categories object (if present) is valid.

An example of passed unit tests: