Introduction to Web Animations API
Explore the fundamentals of the Web Animations API (WAAPI) in this lesson. Learn how to create dynamic animations using keyframes and control animation playback with JavaScript. Understand the benefits of WAAPI over CSS animations and how it integrates into web development.
We'll cover the following...
Web Animations API, also known as WAAPI, is a native API for animation in JavaScript that provides a common language for browsers to interpret DOM elements’ animations.
The basic usage of WAAPI is similar to jQuery’s animate function. The animate function accepts two parameters to define its animations: a set of keyframes and the animation duration.
Let’s take a look at an example of how we can animate an element’s opacity from 0 to 1 using WAAPI in JavaScript.
We first get the element’s reference by using getElementById. Then, we use the element’s reference’s animate function and pass in an array of keyframes ([{ opacity: 0 }, { opacity: 1 }]) as its first parameter, followed by the duration in milliseconds (1000).
Example
Let’s see this in action. Instead of animating the element’s opacity, we’ll create a rotation animation that will be triggered as we click the box.
We’ll use plain JavaScript for this demo. We’ll explore its usage in Angular further in the next section.
Advantages of using WAAPI
WAAPI is a JavaScript-based animation. This has its pros and cons when compared to CSS-based animations. An advantage of WAAPI is its syntax’s similarity to CSS animations, making it easy to learn once you know the basics of CSS animations. Because of the nature of JavaScript, WAAPI is more flexible compared to its CSS counterparts. WAAPI makes it easier for developers to combine static and dynamic values (values that need to be calculated at runtime) to create animations. WAAPI also simplifies chaining animations by using events and promises.
Furthermore, WAAPI provides us with utility functions to control our animations, allowing us to modify the state of our animations easily. These functions include play, pause, finish, cancel, and reverse.
The performance of WAAPI is on par with CSS-based animations, and the choice boils down to how we structure our UI elements and which elements and properties we animate.
CSS animations versus WAAPI
CSS animations and WAAPI are different approaches to creating animations on the web. Although most animations can be achieved using either method, they differ in some key areas.
CSS Animations | WAAPI |
Animations are handled in CSS, which makes CSS animations more framework agnostic | Animations are handled in JavaScript, so some minor adjustments are required depending on the framework |
Allows limited control over animation state | Allows playing, pausing, and reversing an animation as well as altering animation properties, like their playback rate |
Has to be coupled with events to chain multiple elements’ animations | Can be chained easily with multiple elements’ animations by using events and promises |