Animation

Motion in interfaces is not decoration. It is communication. When done well, animation answers questions the user was about to ask: where did that element come from, where is it going, and what just happened?

The Purpose of Motion

Every animation in an interface should serve one of a few functions: orient (explain spatial relationships), inform (communicate the result of an action), guide (direct attention to what matters), or delight (reward engagement in a way that feels natural). Motion without purpose adds noise, not clarity.

Principles That Work

Good interface animation shares a few properties. It is fast — typically 200–400ms for transitions, shorter for feedback. It follows natural physics — easing in and out rather than moving at constant speed. And it respects user preference — the prefers-reduced-motion media query exists for users with vestibular disorders and should always be honoured.

"Animation should feel like physics, not like performance. The best motion goes unnoticed."

Exit Animations Matter

Entrances are obvious. Exits are where most animations break. An element that disappears without animating feels like a bug. An element that animates out smoothly completes the interaction loop and leaves the user with a clear mental model of what just changed.

Framer Motion as a System

Framer Motion's layout animations and shared element transitions handle the hardest cases — animating between states where the DOM structure changes — without requiring manual calculation of positions or sizes. The AnimatePresence component and layoutId prop solve problems that used to require significant boilerplate.

Performance Considerations

Animations should run on the GPU, not the CPU. That means sticking to transform and opacity — properties that can be composited without triggering layout recalculation. Animating width, height, or top/left causes repaints on every frame and should be avoided.

Conclusion

Motion design for the web is a craft. The goal is not to make things move — it is to make interactions feel coherent, intuitive, and alive.