UI Animations are short movements that accompany a change of state – opening a menu, adding to the basket, transitioning between screens. Their role is to explain what has just happened and where an element came from, not to attract attention. They work when they are short, typically within tenths of a second, and when the user barely notices them. Long and conspicuous animations slow things down and become annoying with repeated use. Particular account must be taken of people sensitive to motion who have animation reduction set in their system – the website must respect this setting. It is also worth checking performance on weaker devices, since excessive animation degrades scrolling smoothness and perceived speed. When in doubt, a simple rule applies: if someone notices an animation, it is probably too long.
See also: Loading states, Website accessibility (WCAG), Design System.
