“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