DesignRef Logo
DesignRef
Design SystemsCompareQuick Ref
SearchK
Apple
Apple Human Interface Guidelines

Motion System

Comprehensive motion tokens including easing curves and duration presets for consistent, expressive animations across your application.

8 easing curves10 duration tokens
Quick Reference
Primary EasingEmphasized
Standard Duration300ms
Range50ms - 1000ms
All Design Systems

Apple Human Interface Guidelines

OverviewColorsTypographySpacingShapeMotionElevationLayoutCustomizationContent DesignGlossaryComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms
OverviewColorsTypographySpacingShapeMotionElevationLayoutCustomizationContent DesignGlossaryComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms

Apple Motion Principles

Apple's motion design emphasizes physics-based animations that feel natural and responsive:

  • Spring Animations: The default for most UI transitions. Springs feel natural because they model real-world physics with response, damping, and mass parameters.
  • Interruptible: Animations should be interruptible and redirectable. Users shouldn't wait for animations to complete.
  • Purposeful: Motion should guide focus, show relationships, and provide feedback—never purely decorative.
  • Consistent: Similar actions should have similar animations throughout the system.

Key Parameters: Spring animations use response (speed), dampingFraction (bounciness), and blendDuration for smooth transitions.

Reduced Motion

Users who experience motion sickness or vestibular disorders can enable prefers-reduced-motion in their OS settings. Your app should respect this preference by replacing motion-heavy transitions with instant or fade-only alternatives.

  • Keep: Opacity fades and simple color transitions
  • Remove: Slide, scale, rotation, and parallax animations
  • Replace: Complex enter/exit transitions with instant state changes
  • Preserve: Essential feedback animations (loading indicators, progress bars)
CSS Implementation
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
JavaScript Detection
const prefersReduced = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

Easing Curves

Spring (Default)

response: 0.55, dampingFraction: 1.0

Default system animation, most UI transitions

Spring (Bouncy)

response: 0.5, dampingFraction: 0.7

Playful interactions, toggles, notifications

Spring (Snappy)

response: 0.35, dampingFraction: 0.9

Quick feedback, button taps, menu appearances

Spring (Smooth)

response: 0.8, dampingFraction: 1.0

Sheet presentations, page transitions

Ease In Out

cubic-bezier(0.42, 0, 0.58, 1)

Symmetrical transitions, loading states

Ease Out

cubic-bezier(0, 0, 0.58, 1)

Elements entering view, appearing content

Ease In

cubic-bezier(0.42, 0, 1, 1)

Elements leaving view, dismissing content

Linear

cubic-bezier(0, 0, 1, 1)

Progress indicators, continuous animations

Duration Tokens

Short

Medium

Long

Extra Long

Interactive Demo

M3
transition: all 400ms response: 0.55, dampingFraction: 1.0