Page speed and performance is an important aspect of any application or website. If you are using animation as part of your project, it can be a good place to start when trying to optimise performance. Animating too much or too many properties will cause animations to stutter.
Firstly you can check that you're not using too many animations all at once on the page: as well as being bad for performance, it is also bad for your users' experience. Multiple animations on different parts of the page will be fighting for their attention as well as potentially causing performance issues. Being aware of the number of animations will help to address both of these potential issues.
What causes janky animations?
In order to achieve a smooth 60fps animation, the browser has only 16.7ms (1000ms/60) to achieve all of the work that needs to be done per frame. If the browser can't complete all of the operations needed, it will stop and move on to the next frame, starting the calculation and redrawing process all over again. This is when we start to see dropped frames, causing janky or stuttering animations.
How to avoid janky animations
While the list of animatable properties is extensive, at the moment we can only safely animate a handful of these properties to keep within the necessary 16.7ms. These properties are transform, opacity and filter.
The reason for this is that animating any other property will cause the browser to have to repaint the page, and this is an expensive process in terms of performance and will likely take longer than 16.7ms to calculate and draw each change.
We can also give the browser a helping hand by utilising the will-change property, which gives it a heads up that a property is going to change. This enables the browser to perform some optimisations before your animation even starts.
The new Firefox Quantum project is taking amazing strides towards making every animatable property perform well, as well as many other improvements to rendering content on the web.
It's also worth noting that the newest versions of the iPad will play animations back at 120fps, which will reduce the time in which the browser has to calculate and paint each frame to 8.35ms.
Timing and choreography
Utilising the correct timing and delays will produce animations that look better and are easier to comprehend. When animating any elements, it's important to choose a duration that is appropriate to its context. For example, an animation that's applied to a button interaction should be short, usually less than a second.
Utilising long animations for common interactions is tedious and annoying to the user and can make your application or website feel sluggish and slow. However, providing an animation duration that is too short can cause confusion and provoke the wrong emotions and feelings for your audience. Once you have chosen a comfortable animation duration, you should use this in every aspect of your website or application.
When animating, multiple elements or property delays should be used to enhance comprehension. It's much easier to see what's happening in an animation when one thing happens at a time instead of all at once.
Next page: Learn how to animate SVG
