Tips And Tricks

Hardware acceleration

There are sometimes subtle glitches that happen when running certain types of animations. A glitch usually presents itself as a slight shift in the position of elements within an animation. This happens because of the difference in how CPU and GPU render things.

A solution to this problem is using the will-change property when creating our CSS transitions. This property tells the browser which of the element’s properties will be animated, which in turn causes the browser to better optimize the animation. On a second level, the browser will let the GPU handle the animation instead of both the CPU and GPU.

Note: Running the rendering process on the GPU also has its downsides. It will consume more video resources, which could be limited depending on the device.

The code snippet below animates the opacity of an element with the class box. Opacity animation is very efficient and, because we’re only animating a single element on an empty page, the difference between adding the will-change property will be negligible. The same concept applies to more complicated animations. However, to keep the example simple, we’ll use the opacity transition.

Since we know that we will be modifying the opacity via a CSS transition, we can pass in opacity to the will-change property (line 6). This tells the browser to prepare the element for a change in its opacity so it can better optimize the animation.