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
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:
- Animation name is a valid filename.
- Each keyframe of each animation contains only alowed attributes, that is one or more of animatable CSS properties and (optionally)
offset
,easing
,composite
. - Attributes are sorted according to the convention (see above).
-
offset
attribute (if present in a keyframe) is a number between 0 and 1. -
offset
attributes (if present in several keyframes) are in ascending order. -
easing
attribute (if present in a keyframe) is a valid CSS easing-function. -
composite
attribute (if present in a keyframe) is a valid KeyframeEffect.composite operation. - Animation's options are valid WAAPI timing properties.
- Animation's options are in alphabetical order.
- 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 orNotSupportedError: 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. - Every animatable CSS property has a valid value.
- Categories object (if present) is valid.
An example of passed unit tests: