Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
web-animations-js
Advanced tools
The web-animations-js package is a polyfill for the Web Animations API, which allows developers to create complex animations using JavaScript. It provides a unified way to animate DOM elements, offering control over timing, keyframes, and playback. This package is particularly useful for ensuring compatibility with browsers that do not fully support the Web Animations API.
Basic Animation
This feature allows you to create a basic animation that moves an element 100 pixels to the right over a duration of 1 second, repeating infinitely.
document.getElementById('element').animate([{ transform: 'translateX(0px)' }, { transform: 'translateX(100px)' }], { duration: 1000, iterations: Infinity });
Keyframe Animations
This feature allows you to define keyframe animations, where an element's opacity changes from 0 to 1 and back to 0 over a duration of 2 seconds.
document.getElementById('element').animate([{ opacity: 0 }, { opacity: 1 }, { opacity: 0 }], { duration: 2000, iterations: 1 });
Easing Functions
This feature allows you to apply easing functions to animations, making them start and end more smoothly. In this example, the element scales up to 1.5 times its size over 0.5 seconds with an 'ease-in-out' effect.
document.getElementById('element').animate([{ transform: 'scale(1)' }, { transform: 'scale(1.5)' }], { duration: 500, easing: 'ease-in-out' });
Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It supports CSS properties, SVG, DOM attributes, and JavaScript objects. Compared to web-animations-js, Anime.js offers more advanced features like timeline control and staggering animations.
GSAP (GreenSock Animation Platform) is a robust JavaScript library for high-performance animations. It provides a rich set of features including timeline management, complex easing, and plugins for various types of animations. GSAP is more feature-rich and performant compared to web-animations-js, making it suitable for more complex animation needs.
Velocity.js is an animation engine that combines the best of jQuery and CSS transitions. It offers high performance and a simple API for creating animations. While web-animations-js focuses on providing a polyfill for the Web Animations API, Velocity.js is designed for performance and ease of use, making it a good alternative for creating smooth animations.
To provide native Chrome Web Animation features (Element.animate
and Playback
Control) in other browsers, use web-animations.min.js
. To explore all of the
proposed Web Animations API, use web-animations-next.min.js
.
Web Animations is a new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers.
For more details see the W3C specification.
The polyfill is a JavaScript implementation of the Web Animations API. It is supported on modern versions of all major browsers, including:
Here's a simple example of an animation that scales and changes the opacity of
a <div>
over 0.5 seconds. The animation alternates producing a pulsing
effect.
<script src="web-animations.min.js"></script>
<div class="pulse" style="width:150px;">Hello world!</div>
<script>
var elem = document.querySelector('.pulse');
var animation = elem.animate([
{opacity: 0.5, transform: "scale(0.5)"},
{opacity: 1.0, transform: "scale(1)"}
], {
direction: 'alternate',
duration: 500,
iterations: Infinity
});
</script>
Web Animations supports off-main-thread animations, and also allows procedural generation of animations and fine-grained control of animation playback. See http://web-animations.github.io for ideas and inspiration!
When the polyfill runs on a browser that implements Element.animate
and
Animation
Playback Control it will detect and use the underlying native
features.
Tracks the Web Animations features that are supported natively in browsers. Today that means Element.animate and Playback Control in Chrome. If you’re not sure what features you will need, start with this.
Contains all of web-animations.min.js plus features that are still undergoing discussion or have yet to be implemented natively.
A cut down version of web-animations-next, it removes several lesser used property handlers and some of the larger and less used features such as matrix interpolation/decomposition.
web-animations | web-animations-next | web-animations-next-lite | |
---|---|---|---|
Size (gzipped) | 12.5kb | 14kb | 10.5kb |
Element.animate | ✔ | ✔ | ✔ |
Timing input (easings, duration, fillMode, etc.) for animation effects | ✔ | ✔ | ✔ |
Playback control | ✔ | ✔ | ✔ |
Support for animating lengths, transforms and opacity | ✔ | ✔ | ✔ |
Support for animating other CSS properties | ✔ | ✔ | 🚫 |
Matrix fallback for transform animations | ✔ | ✔ | 🚫 |
KeyframeEffect constructor | 🚫 | ✔ | ✔ |
Simple GroupEffects & SequenceEffects | 🚫 | ✔ | ✔ |
Custom Effects | 🚫 | ✔ | ✔ |
Timing input (easings, duration, fillMode, etc.) for groups | 🚫 | 🚫* | 🚫 |
Additive animation | 🚫* | 🚫* | 🚫 |
Motion path | 🚫* | 🚫* | 🚫 |
Modifiable keyframe effect timing | 🚫 | 🚫* | 🚫* |
Modifiable group timing | 🚫 | 🚫* | 🚫* |
Usable inline style** | ✔ | ✔ | 🚫 |
* support is planned for these features. ** see inline style caveat below.
Some things won’t ever be faithful to the native implementation due to browser and CSS API limitations. These include:
Inline style modification is the mechanism used by the polyfill to animate properties. Both web-animations and web-animations-next incorporate a module that emulates a vanilla inline style object, so that style modification from JavaScript can still work in the presence of animations. However, to keep the size of web-animations-next-lite as small as possible, the style emulation module is not included. When using this version of the polyfill, JavaScript inline style modification will be overwritten by animations. Due to browser constraints inline style modification is not supported on iOS 7 or Safari 6 (or earlier versions).
The polyfill will automatically detect the correctly prefixed name to use when writing animated properties back to the platform. Where possible, the polyfill will only accept unprefixed versions of experimental features. For example:
var effect = new KeyframeEffect(elem, {"transform": "translate(100px, 100px)"}, 2000);
will work in all browsers that implement a conforming version of transform, but
var effect = new KeyframeEffect(elem, {"-webkit-transform": "translate(100px, 100px)"}, 2000);
will not work anywhere.
File an issue on GitHub: https://github.com/w3c/web-animations/issues/new. Alternatively, send an email to public-fx@w3.org with subject line “[web-animations] … message topic …” (archives).
Report any issues with this implementation on GitHub: https://github.com/web-animations/web-animations-next/issues/new.
When we make a potentially breaking change to the polyfill's API surface (like a rename) we will, where possible, continue supporting the old version, deprecated, for three months, and ensure that there are console warnings to indicate that a change is pending. After three months, the old version of the API surface (e.g. the old version of a function name) will be removed. If you see deprecation warnings you can't avoid it by not updating.
We also announce anything that isn't a bug fix on web-animations-changes@googlegroups.com.
2.1.4 - December 1 2015
Date.now()
instead of performace.now()
for mobile Safari.FAQs
JavaScript implementation of the Web Animations API
The npm package web-animations-js receives a total of 133,642 weekly downloads. As such, web-animations-js popularity was classified as popular.
We found that web-animations-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.