denkwerk TechTalk

More flexibility by using Web Animation API

"We prefer to only run composites, because going through the entire render pipeline is often too resource hungry."

Linus Rösler Junior Web Developer at denkwerk

Therefore, the Transform property is more suitable for this example. A new layer is created from this, which means that only the part of the animation that is actually moving has to be recalculated. This saves computing power and memory on the end device, which ultimately benefits the visitors of the website.

Web Animation API chains animations easier

Conveniently, the margin method in CSS can also be replaced very easily by the CSS transformation in existing projects – the code therefore remains largely the same.

However, CSS animations are basically subject to some limitations. With the Web Animation API, it is easier to chain animations or create complex animations, as this would be difficult without JavaScript.

It is possible to combine multiple animations or trigger them based on the previous animation. Interactive elements can also be used to influence animations, such as their speed, starting or ending the animation. For example, the "onfinish" function can be used to react to the end of an animation. Using the "getAnimations" method, animations can be retrieved and controlled specifically with WAAPI. For example, the animation can be slowed down or ended to increase accessibility. It does not matter whether an animation was implemented with WAAPI or CSS.

Web Animation API as a powerful tool

In short, the Web Animation API is an extremely powerful tool for implementing even complex animations in a resource-saving and accessible manner. As a web standard with broad browser support, it can also be used in any web project. Perhaps you are also interested in animations on your website. Just talk to your denkwerk contact or write to