Web Animations API - A Compelling Case

When implementing an animation on an HTML document, the natural first reaction is to turn to CSS and handle animations through that avenue. However, instead of having an entirely separate document for handling these animations, we can make use of the versatile web animation tool, Web Animations API. Web Animations API, WAAPI for short, can be utilized entirely within the JavaScript framework and works directly in reference to DOM elements that could be manipulated by CSS. WAAPI has a wide range of tools, information, and control regarding web element animations. Read on to find a breakdown of the major components and syntax of a WAAPI animation, a quick example of how to code an animation using these components, and a brief overview of the advantages of WAAPI over some of its contemporaries.

An important concept in animation as a whole, is that of keyframes. Keyframes are the starting and endpoints of a particular animation. As an example, in an HTML document you might have an image with a specific top and left position. If you were to animate that image to move to a new position, that image with its new location data would be the second keyframe, with its old position being the first. Keyframes in the context of Web Animations API can even include in-between keyframes of an animation, such as an image that moves to one new position, then moves to a second position following that animation, for a total of three keyframes. The number of these in-between keyframes is not limited to three, but as many keyframes as you put in the keyframes array. But more on that later, let’s talk about animation timing.

Animations can be described, in the context of HTML webpages, as a series of transformations on an element occurring at specific moments on a defined timeline for that animation. In the broader scope, each of those animation timelines are placed on the entire HTML document’s timeline. By default, these transformations will occur equally spaced along the animation timeline, but they can have their start and endpoints explicitly defined. Furthermore, the current time of a specific ongoing animation can be accessed as well. Now that we have covered the component parts of an animation, let’s delve into the animation itself.

When an animation is started, it returns an animation object that allows you to access various data regarding the ongoing animation. Some examples of this data are playState which is what stage of the animation process the animation currently is in, finished which returns a Promise(a blog post all unto its own) that resolves at the completion of the animation, pending which returns a boolean value indicating whether the animation is waiting on other asynchronous code to resolve before beginning, and plenty others. It also allows you specific tools to control that animation as well. Animations can be paused, started, finished, reversed, cancelled, and more. Animation objects can also be created directly with the animation constructor, allowing you to create the animation without having to pause it immediately and use it whenever you want.

Now that we have outlined the tools and their structure, lets look at an example. Below I have a code example of how to animate an HTML element using WAAPI:

// First we want to define our keyframes in an array
// These will look very similar to keyframes in CSS
let targetKeyframes = [
  {transform: 'rotate(0deg)'}, 
  {transform: 'rotate(180deg)'},
  {transform: 'rotate(360deg)'}
  ];

// Now define the duration of the animation and the 
// number of times to run the animation
let targetTiming = 
{duration : 2000,
 iterations: Infinity};

// Finally, run the animation with your chosen HTML
// element
document.getElementById("target").animate(
  targetKeyframes, 
  targetTiming);

When this code is run on an HTML element that can be animated, the element will rotate until the animation is cancelled elsewhere or the page is closed. Now let's brush over a few of the advantage WAAPI holds over CSS animations and other web animation tools.

In comparison with CSS animations, WAAPI can be applied directly in the JavaScript file of your webpage which allows for a host of benefits. For example, because you have access to the logic and functionality of your webpage inside the JavaScript file, you can defined and manipulate aspects of your animation based on this information that might be inaccessible or difficult to access from CSS files. In comparison to animation through jQuery, aside from having a broader suite of animation tools and control than jQuery, WAAPI can directly refer to HTML elements when animating, whereas jQuery requires that all HTML elements be wrapped in a jQuery object to interact with them. For these reasons and more, Web Animations API should easily make a space in your toolbelt for web page development.

Arguably, the best part of WAAPI is that it doesn't try too hard to reinvent the wheel. The types of animations all function similarly to CSS, the layout of the keyframes is similar, and the keywords themselves are derivative of their forbearers. Where WAAPI shines is increasing the readability, utility, and control of these tools and making them available in a broader context.

Sources: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API