Why your animations are making users wait

We all love animations that make a UI feel interactive. But poorly implemented animations can make any UI really slow. The secret to smooth and fast implementations is knowing how to avoid some common mistakes.

Some of which are:

1. Transitioning heavy properties - Animating properties like width, height, or left can cause serious performace issues. This happens because they trigger a repaint operation which is heavy. On the other hand, properties like transform and opacity should be used. The reason is because the latter properties use GPU processing which is optimized for rendering graphics-heavy properties.
2. Not using will-change as it should be used - The will-change CSS property can be used to improve the performance of animations and transitions, especially when working with complex filters, etc, but it should be used carefully as using it everywhere can waste memory resources and cause lags.
3. Animating box-shadow - Animating box-shadow will hurt performance, but you can create the same effect with the smallest repaint operations by animating the opacity of a pseudo-element. This would help achieve smoother animations.
4. Using transition: all - The transition: all animates every property that can change, and you can imagine what this would do to any UI, especially if there are so many animations implemented. Transitioning should be directly set and applied to the specific elements.
5. Too many transitions all happening at the same time - Running a lot of transitions at once and at the same time can cause hanging on the UI, particularly on devices that are not built to handle heavy processing.
6. Animating during heavy JavaScript execution - Transitions clashing with heavy DOM manipulation done by JS can cause dragging animations.

References:

• CSS-Tricks: "Animate box-shadow with Silky Smooth Performance" CSS-Tricks
• DEV Community: "Costly CSS Properties and How to Optimize Them"
• LambdaTest: "Boosting Web Performance With CSS GPU Acceleration"