Animation in interfaces is polarizing. Some designers add motion to everything, creating experiences that feel sluggish and theatrical. Others avoid it entirely, creating interfaces that feel static and disconnected. The truth, as usual, is somewhere in between.
The Purpose of Motion
Motion in interfaces serves exactly three purposes:
- Orientation - Helping users understand where they are in the spatial model
- Feedback - Confirming that an action was received and processed
- Continuity - Connecting state changes so they feel like transformations rather than cuts
If an animation does not serve one of these purposes, it is decoration. Decoration has its place, but it should be used sparingly and intentionally.
Spring Physics Over Bezier Curves
The most significant shift in interface animation over the past few years has been the move from bezier curves to spring physics. This is not just a technical change. It is a philosophical one.
Bezier curves are defined by duration. You decide how long an animation should take, and then you shape the curve to fill that time. This is fundamentally backwards. In the real world, motion is defined by physical properties: mass, tension, and friction.
Spring animations are defined by these physical properties. The duration is an emergent property, not an input. This means spring animations can be interrupted and redirected naturally, which is essential for responsive interfaces.
When to Animate
A simple decision framework:
Animate when the alternative is confusion.
If removing the animation would make a state change disorienting, the animation is earning its keep. If removing it would make no difference to comprehension, it is probably unnecessary.
Good Motion
- Page transitions that maintain spatial context
- Loading states that indicate progress and direction
- Micro-interactions that confirm user input
Gratuitous Motion
- Logo animations on every page load
- Parallax effects that add visual complexity without information
- Staggered list animations that delay content visibility
Performance Budget
Every animation has a performance cost. On lower-end devices, this cost can be significant. I follow a simple rule:
If it can't run at 60fps on a mid-range phone, it doesn't ship.
This constraint forces discipline. It means using transform and opacity as primary animation properties. It means avoiding layout-triggering animations. It means testing on real devices, not just high-end development machines.
The Best Animation Is No Animation
Sometimes the best solution is to skip the animation entirely. Instant state changes can feel more responsive than animated ones, especially for frequent actions. The pull-down dismiss gesture on iOS sheets, for example, animates when released but snaps instantly when the user is actively dragging. This hybrid approach respects both the user's need for responsiveness and their need for orientation.