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.
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.
A JavaScript implementation of the Web Animations API that provides Web Animation features in browsers that do not support it natively. The polyfill falls back to the native implementation when one is available.
Here's a simple example of an animation that fades and scales a <div>.
Try it as a live demo.
<!-- Include the polyfill -->
<script src="web-animations.min.js"></script>
<!-- Set up a target to animate -->
<div class="pulse" style="width: 150px;">Hello world!</div>
<!-- Animate! -->
<script>
var elem = document.querySelector('.pulse');
var animation = elem.animate({
opacity: [0.5, 1],
transform: ['scale(0.5)', 'scale(1)'],
}, {
direction: 'alternate',
duration: 500,
iterations: Infinity,
});
</script>
For feedback on the API and the specification:
For issues with the polyfill, report them on GitHub: https://github.com/web-animations/web-animations-js/issues/new.
Breaking polyfill changes will be announced on this low-volume mailing list: web-animations-changes@googlegroups.com.
FAQs
JavaScript implementation of the Web Animations API
The npm package web-animations-js receives a total of 142,544 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.
Research
/Security News
Undocumented protestware found in 28 npm packages disrupts UI for Russian-language users visiting Russian and Belarusian domains.
Research
/Security News
North Korean threat actors deploy 67 malicious npm packages using the newly discovered XORIndex malware loader.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.