“This is the 10th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

There is a native API in JavaScript for Animations called the Web Animations API. In this article, we refer to it as WAAPI.

In this article, we’ll compare animations done with WAAPI to those done with CSS.

Notes on browser support

While the capabilities currently supported by browsers are limited, WAAPI has a comprehensive and powerful Polyfill tool that makes it usable in production environments. Polyfill is a JavaScript implementation of the Web animation API that provides Web animation functionality in browsers that don’t natively support it. When one is available, Polyfill falls back to the native implementation.

WAAPI basis

If you’ve ever used jQuery’s.animate(), the basic syntax of WAAPI should look familiar.

var element = document.querySelector('.animate-me');
element.animate(keyframes, 1000);
Copy the code

The Animate method accepts two parameters: a keyframe and a duration. Not only does it have the advantage of being built into the browser compared to jQuery, it also has higher performance.

The first argument, the keyframe, should be an array of objects. Each object is a key frame in our animation. Here’s a simple example:

var keyframes = [
  { opacity: 0 },
  { opacity: 1}];Copy the code

The second parameter, duration, is how long we want the animation to last. In the example above, it is 1000 milliseconds. Let’s look at an interesting example.

This is the keyframe in CSS:

0% {
  transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
  transform-origin: 50% 0;
  filter: blur(40px);
  opacity: 0;
}
100% {
  transform: translateY(0) scaleY(1) scaleX(1);
  transform-origin: 50% 50%;
  filter: blur(0);
  opacity: 1;
}
Copy the code

Here’s the same code in WAAPI:

var keyframes = [
  { 
    transform: 'translateY (1000 px) scaleY scaleX (2.5). (2)'.transformOrigin: '50% 0'.filter: 'blur(40px)'.opacity: 0 
  },
  { 
    transform: 'translateY(0) scaleY(1) scaleX(1)'.transformOrigin: '50% 50%'.filter: 'blur(0)'.opacity: 1}];Copy the code

We’ve seen how easy it is to apply keyframes to any element we want to animate:

element.animate(keyframes, 700);
Copy the code

To keep the example simple, I just specify the duration. However, we can use the second argument to pass more options. At the very least, we should also specify a slow animation. Here is a complete list of available options with some sample values:

var options = {
  iterations: Infinity.iterationStart: 0.delay: 0.endDelay: 0.direction: 'alternate'.duration: 700.fill: 'forwards'.easing: 'ease-out',
}
element.animate(keyframes, options);
Copy the code

slow

Easing is one of the most important elements in any animation. WAAPI gives us two different ways to set up slow animations — in our keyframe array or in our options object.

In CSS, if you apply animation-timing-function: ease-in-out to ease in and out animations. The entire animation plays at ease-in-out speed from beginning to end.

div {
  animation-timing-function: ease-in-out;
}
Copy the code

The fact that easing is applied between key frames, rather than throughout the animation, gives fine-grained control over the feel of the animation. WAAPI provides this capability.

var keyframes = [
  { opacity: 0.easing: 'ease-in' }, 
  { opacity: 0.5.easing: 'ease-out' }, 
  { opacity: 1}]Copy the code

It is important to note that in CSS and WAAPI, you should not pass a slow value for the last frame, as this will not work. This is a mistake many people make.

Sometimes it’s more intuitive to add easing to the entire animation.

var options = {
  duration: 1000.easing: 'ease-in-out',}Copy the code

Note another difference between CSS animation and WAAPI: THE default value for CSS is ease, while the default value for WAAPI is Linear.

WAAPI offers the same performance improvements as CSS animation, allowing for smooth animation, which means we can avoid using will-change.

The animation object

The.animate() method not only animates our element, it also returns something.

var myAnimation = element.animate(keyframes, options);
Copy the code

If we look at the return value in the console, we see that it is an animated object. This gives us a variety of features, some of which are straightforward, such as pausing animation:

myAnimation.pause() 
Copy the code

We can also use CSS animations to achieve a similar effect by changing the animation-play-state property

element.style.animationPlayState = "paused"
Copy the code

We can also easily reverse our animation myanimation.reverse ().

With WAAPI, we can simply use myanimation.play () to play the animation from scratch, if it has been finished before, or from the middle iteration if we pause it.

We can even change the speed of the animation with complete ease.

myAnimation.playbackRate = 2; // speed it up
myAnimation.playbackRate = .4; // use a number less than one to slow it down
Copy the code

Get the animation

This method will return us any animations defined by WAAPI as well as any CSS Transitions or animations.

element.getAnimations() // returns any animations or transitions applied to our element using CSS or WAAPI
Copy the code

GetAnimations () allows you to use the API in conjunction with @Keyframes if you are comfortable and satisfied with defining and applying animations using CSS.

GetAnimations () will always return an array, even if only one animation is applied to a DOM element. Let’s get the individual animation object to use.

var h2 = document.querySelector("h2");
var myCSSAnimation = h2.getAnimations()[0];
Copy the code

Now we can use the Web animation API on our CSS animations.

myCSSAnimation.playbackRate = 4;
myCSSAnimation.reverse();
Copy the code

Event promise

We already have a variety of CSS that we can use to trigger events in our JavaScript code: AnimationStart, AnimationEnd, AnimationIteration, and TransitionEnd. I often need to listen for the end of an animation or transition and then remove the element to which it applies from the DOM.

Use onFinish in WAAPI, same as animationEnd or TransitionEnd:

myAnimation.onfinish = function() {
  element.remove();
}
Copy the code

WAAPI gives us the choice of using events and promises. The properties of our animation object will return a promise resolved at the end of the animation. Here’s an example of using Promise above:

myAnimation.finished.then(() = >
  element.remove())
Copy the code

In this example, our function will not run until all animations on the page are complete.

Promise.all(document.getAnimations().map(animation= > 
  animation.finished)).then(function() {           
    // do something cool 
  })
Copy the code