Motion Design Principles

Motion in UI is not decoration — it's communication. Good animation clarifies relationships, directs attention, and provides feedback.

"Animation is not about making things bounce. It's about making things understandable." — Pasquale D'Silva

The 12 Principles of UI Motion

1. Purposeful

Every animation serves a function. If removing it changes nothing meaningful, remove it.

2. Duration: Size Determines Speed

Smaller elements = shorter duration. Larger area transitions = longer duration.

Default: 200-300ms for most transitions.

3. Easing: Nothing Moves Linearly

Linear easing feels robotic. Everything in the real world accelerates and decelerates.

Rule: Entering elements decelerate (ease-out). Exiting elements accelerate (ease-in).

4. Spatial Continuity

Elements should originate from and return to logical locations.

• FAB expands from its button location, not from screen center
• Modal slides in from the trigger element's direction
• Back button returns to the previous screen's position

5. Stagger

When multiple elements animate, stagger their start times.

6. Feedback Under 100ms

Input feedback must feel instant. Any delay over 100ms feels laggy.

• Button press: scale to 0.97, release on lift (100ms)
• Touch ripple: start immediately on touch

7. Enter, Exit, and Everything Between

Define animations for all states:

8. Reduced Motion

Always respect prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

9. Spring Physics for Interaction

Use spring physics (not duration-based easing) for draggable/interactive elements. Springs feel responsive — they react to velocity.

10. Scroll Animations Must Earn Their Place

Parallax and scroll-triggered animations often hurt more than help. Use only when:

• They reveal content progressively
• They help users understand spatial relationships
• They don't interfere with reading

11. Content Morphing

When content changes, morph between states rather than replacing. Examples:

• Number counters that animate up/down
• Shape morphing between icons
• Layout transitions that reposition elements fluidly

12. Only Animate Performant Properties

To maintain 60fps, only animate these properties:

Choreography Patterns

Parent-Child

Parent element triggers, children follow with stagger.

Sibling

Related elements animate in sequence.

Independent

Unrelated elements animate independently (no forced synchronization).

Reference Map

• references/timing-easing-tables.md — duration by size, easing roles, stagger, purpose gate
• references/reduced-motion-a11y.md — prefers-reduced-motion, WCAG 2.3, safe replacements

Related Skills

• For microinteraction details → use interaction-design-patterns
• For calm technology motion → use calm-technology-ui
• For Framer Motion patterns → use ai-native-ui-design