Animation / Motion Design

Animation and motion design in interfaces use movement to guide attention, provide feedback, indicate transitions, and add personality. Effective motion is purposeful, performant, and respectful of user preferences.

Category: Design (also: UX)

Author: Atomic Glue Editorial Team

## Definition

Animation and motion design in digital products use movement to communicate meaning, guide attention, create smooth transitions between states, and reinforce the relationship between elements on screen. Motion is not decoration. It serves specific UX functions: easing transitions (a menu that slides in rather than appearing instantly), showing spatial relationships (a card that expands into a detail view communicates that the detail is connected to the card), providing feedback (a button that depresses on click confirms the action registered), guiding focus (a subtle glow that shifts attention to a newly loaded element), and adding personality (a playful bounce that aligns with brand character). Motion design is governed by principles of timing, easing (acceleration curves), and spatial continuity.

## The UX Functions of Motion

Wayfinding: Motion helps users understand where they came from and where they are going. A page that slides in from the right and slides back when dismissed creates a spatial map. Causality: Animate the effect of an action from the source of the action. If you add an item to a cart, the item should animate into the cart icon. This makes the relationship between action and result obvious. Hierarchy: More important transitions can use more dramatic motion, but subtle is usually better. Feedback: Motion confirms actions. Pull-to-refresh has the spinner appear, then the content refreshes. Continuity: As screens change, elements in common positions should transition smoothly rather than disappear and reappear.

## Easing: The Soul of Motion

Easing defines the acceleration curve of an animation. Linear motion (constant speed) feels robotic and unnatural. Ease-in (starts slow, ends fast) works for elements leaving the screen. Ease-out (starts fast, ends slow) works for elements entering the screen. Standard easing (acceleration and deceleration) works for most UI transitions. Custom cubic-bezier curves can match brand personality. The Material Design motion system provides a solid default set of easing curves. A common mistake is making motion too slow. Most UI animations should complete in 200-400ms.

## Accessibility and Motion

Motion in interfaces can cause discomfort or vestibular disorders for some users. Always implement prefers-reduced-motion media query support, which disables or simplifies animations for users who have requested reduced motion. Essential motion (progress indicators, feedback for button clicks) should remain, but decorative motion, parallax, and large transitions should be removed. Every animation should be tested with reduced motion enabled to ensure the interface remains functional and understandable.

## Note

Always test motion on actual devices. Motion that looks smooth in a design tool may perform poorly on lower-end hardware.

## In code

/* Easing curves and reduced motion */
.card-enter {
  animation: slideUp 0.3s cubic-bezier(0.2, 0, 0, 1);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .card-enter {
    animation: fadeIn 0.15s ease-out;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Material Design standard easing */
.easing-standard {
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
}

## Common questions

Q: How long should UI animations last?

A: 200-400ms for most UI transitions (menus, modals, page transitions). Micro-interactions (button feedback, toggles) should be faster: 100-200ms. Loading animations can loop but should not outlast the actual loading time. If an animation takes more than 500ms, users perceive it as slow.

Q: Should every element animate?

A: No. Only elements that benefit from motion should animate. Decorative animation that does not communicate, guide, or provide feedback is noise. Every animation should answer one question: does this motion help the user understand what is happening?

## Key takeaways

• Interface motion serves specific UX functions: wayfinding, causality, feedback, hierarchy, continuity.
• Easing (acceleration curves) determines whether motion feels natural or robotic.
• Most UI animations should complete in 200-400ms.
• Always respect prefers-reduced-motion. Disable decorative motion; keep essential feedback animations.
• Motion should communicate, guide, or provide feedback. If it does none of these, remove it.

## Related entries

• [Microinteractions](atomicglue.co/glossary/microinteractions)
• [UI (User Interface)](atomicglue.co/glossary/ui-user-interface)
• [Empty State / Error State / Loading State](atomicglue.co/glossary/empty-state-error-state-loading-state)

Last updated July 2026. Permalink: atomicglue.co/glossary/animation-motion-design