Hello readers, Web Animations API (WAAPI) is a browser API that lets you create animations and control their playback with Javascript. Refer to the MDN docs for WAAPI to learn how to use it. Here in this article, we discuss how to use WAAPI efficiently. Animations running in the application are taking up memory consumption in the CPU, which can sometimes lead to memory leaks if not handled appropriately.
Firstly, Let’s take a look at how to create a basic animation using WAAPI.
const animation = element.animate([
{ transform: 'transformX(0px)', }
{ transform: 'transformX(200px)', }
],
{ duration: 2000, easing:'ease-in', iterations: Infinity }
);
Avoid using iterations: Infinity
Creating animations with infinite iterations will constantly take up CPU consumption. This can be avoided by specifying the number of iterations for animations.
const animation = element.animate([
{ transform: 'transformX(0px)', }
{ transform: 'transformX(200px)', }
],
{ duration: 2000, easing:'ease-in', iterations: 100 }
);
Use animation.onfinish function
For setting the last frame value once the animation has finished playing, developers should try to use animation.onfinish() function instead of using fill: ‘forwards’ in the animation itself if you are concerned about the memory consumption of your application as fill: ‘forwards’ has higher memory consumption. Since the affected element will continue to be rendered in the state of the final animation with fill: ‘forwards’.
const animation = element.animate(
{ opacity: [1] },
{ duration: 350, easing: 'ease-in' },
);
animation.onfinish = () => {
element?.style.setProperty('opacity', '1');
}
Use element.style.setProperty(‘prop’, ‘value’) instead of element.style.[prop] = value
Both conventions are similar for setting the CSS style properties. But there’s a slight difference:
Properties should be in camelCase since the hyphen is an invalid identifier in Javascript. For example:
element.style.backgroundColor = 'red';
On the other hand, CSS properties can be used with hyphens as strings in the setProperty function. For example:
element.style.setProperty('background-color', 'red');
This is also considered a good practice as CSS properties can be used as a string in JS using the setProperty(‘prop’, ‘value’) function.
Always set the opacity to either 0 or 1 explicitly using setProperty after animating the opacity
For example, for the following code:
return element.animate(
{ opacity: [1, 0] },
{
duration: 500,
easing: 'ease-in-out',
fill: 'forwards'
},
);
It should be refactored as follows:
const animation = element.animate(
{ opacity: [1,0] },
{
duration: 500,
easing: 'ease-in-out',
fill: 'forwards'
},
);
animation.onfinish = () => element.setProperty('opacity' , '1');
return animation;
In the first method, the last frame of the animation is held by the animation itself.
The animation context is freed in the second method, and the opacity value comes from a CSS engine.
This is crucial for animation performance.
If you don’t do it, It may lead to memory leaks and GPU thread CPU consumption will go through the roof.
Animation Cleanup
Cleanup for animations is essential for reducing memory leaks and GPU thread CPU consumption. Any KeyFrameEffects remaining in the affected element after the animation playback is just consuming the memory
element.getAnimations().forEach((animation) => animation.cancel());
animation.cancel() clears the KeyFrameEffects caused by the affected animation and aborts its playback.
Conclusion
With WAAPI, we can move interactive animations from stylesheets to JavaScript, separating presentation from behavior. These are some techniques to use WAAPI efficiently to reduce memory leaks and minimize CPU consumption.
