denkwerk TechTalk
More flexibility by using Web Animation API
The monthly TechTalk at denkwerk serves the exchange and knowledge transfer about brand-new technical developments. In the last TechTalk, our Junior Frontend Developer Linus Rösler presented the advantages of the new Web Animation API for developing animations on the web. By now, all modern browsers – such as Chrome, Firefox, Edge and Safari – support this technology, which enables the resource-saving and flexible generation of animations.
First, Linus briefly explained the classic method of web animation using CSS animation. For this, there are several methods for efficient implementation. For example, the movement of an object can be done very basally using margin. The disadvantage here, however, is that the required calculations for the animation are always executed again.
CSS animation – explained step by step
The reason for this behavior lies in the browser's render pipeline. Based on the CSS code, several processes are executed one after the other. First, the "style" process assigns the appearance of the elements. This is followed by the creation of the "layout" by calculating the size and position of each element. In the penultimate step "paint" the pixels are painted. In order to go through another "paint" as quickly as possible, the screen is divided into layers, so-called layers. Some elements and certain CSS properties each create their own layer. In the last step, all layers are merged and output (composite). It is possible to skip steps, as the sequence of the render pipeline will still continue with the next step as usual.
"We prefer to only run composites, because going through the entire render pipeline is often too resource hungry."
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 hello@denkwerk.com.
