M·All Concepts
33
M

Motion

Time as a design material.

1 min read·Community

Motion is not decoration — it is information. The speed, easing, and direction of movement communicate state changes, spatial relationships, and causal chains that static design cannot express.

The Thought

The Disney animators who developed the twelve principles of animation in the 1930s were not making principles of animation — they were discovering the vocabulary of believable motion. Squash and stretch, anticipation, follow-through: these are not cartoon effects but descriptions of how objects move in the physical world, and why our brains find motion that violates these principles uncomfortable.

The functional value of motion in interfaces is largely about spatial orientation. When a panel slides in from the right, the user understands it is coming from behind the current view. When a modal scales up from a trigger element, the user understands the relationship between them. This is motion doing work that a static state change cannot do.

The most common mistake in interface animation is treating it as a production value rather than a communication tool. Adding transitions everywhere, making them slow and elaborate — these are the symptoms of motion used to impress rather than to inform. The test of every animation is simple: does the user understand the interface better because of it?

Key Principles
  1. 01

    Animation should reinforce spatial relationships, not decorate state changes.

  2. 02

    Duration matters: 200-400ms for most UI transitions; anything longer needs a reason.

  3. 03

    Ease-out for entrances, ease-in for exits — objects decelerate into position.

  4. 04

    Respect prefers-reduced-motion; never make animation mandatory for comprehension.

  5. 05

    If you cannot explain what an animation communicates, remove it.

Related