web-animations-js

What is web-animations-js?

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.

What are web-animations-js's main functionalities?

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' });

Other packages similar to web-animations-js

animejs

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

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-animate

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.

README

What is Web 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.

What is in this repository?

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.

Quick start

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>

Documentation

• Codelab tutorial
• Examples of usage
• Live demos
• MDN reference
• W3C specification

We love feedback!

• For feedback on the API and the specification:

  • File an issue on GitHub: https://github.com/w3c/web-animations/issues/new
  • Alternatively, send an email to [e-mail] with subject line "[web-animations] ... message topic ..." (archives).

• For issues with the polyfill, report them on GitHub: https://github.com/web-animations/web-animations-js/issues/new.

Keep up-to-date

Breaking polyfill changes will be announced on this low-volume mailing list: [e-mail].

More info

• Technical details about the polyfill
  • Browser support
  • Fallback to native
  • Feature list
  • Feature deprecation and removal processes
• To test experimental API features, try one of the experimental targets

Changelog

2.3.2 - June 25 2019

• Fix the wrapping IIFE of the prod bundle.
  • Minor fixes for Closure compilation compatibility.
  • Fixed Cannot set property _isFinished of #<Object> which has only a getter