Animations & Transitions (Use Sparingly)

Why it matters

Excessive motion can cause distraction or motion sensitivity issues. Auto-advancing content can be inaccessible. Some people experience discomfort, nausea, or seizures from certain types of motion, while others find animations distracting from the actual content.

⚠️ Motion sensitivity considerations

Animations and transitions can affect people with:

  • Vestibular disorders: Motion can trigger dizziness or nausea
  • Photosensitive epilepsy: Flashing or rapid motion may trigger seizures
  • ADHD or attention disorders: Motion can be highly distracting
  • Visual processing difficulties: Moving content can impair comprehension

Safer patterns

  1. Prefer simple 'Appear' or 'Fade' animations only when they aid comprehension
  2. Avoid flashing effects and rapid transitions (no more than three flashes per second)
  3. Set important reveals to 'On Click' rather than timed 'After Previous'
  4. Provide an alternative (static) version if motion is essential to understanding

Recommended animation types:

  • Appear: Simple, instant appearance
  • Fade In/Out: Gentle, slow transitions
  • Wipe: Controlled directional reveals
  • Zoom (subtle): Minimal size changes for emphasis

Animations to avoid:

  • Spinning/rotating: Can trigger motion sensitivity
  • Bouncing/flying: Rapid movement patterns
  • Flashing/strobing: Risk of triggering seizures
  • Auto-playing loops: Continuous motion without user control

User control principles

Give users control over timing:

  • Click-triggered animations: Use "On Click" instead of automatic timing
  • Pause capabilities: Allow users to stop animations when needed
  • Skip options: Provide ways to bypass animated content
  • Speed control: Consider providing playback speed options

Respect user preferences:

  • System settings: Honor "reduce motion" preferences where possible
  • Alternative formats: Provide non-animated versions
  • Warning notices: Alert users to animated content in advance
  • Essential vs. decorative: Distinguish between necessary and ornamental motion

Providing alternatives

When animations are necessary:

  • Static version: Create a version without animations
  • Step-by-step slides: Break animated sequences into individual slides
  • Text descriptions: Describe the animated process in words
  • User choice: Let users choose animated or static versions

Communication strategies:

  • Advance warning: Notify audience about upcoming animations
  • Describe motion: Verbally explain what animations show
  • Pause points: Build in natural stopping points
  • Summary slides: Include static summaries after animated sequences

Quick checklist

Before using animations:

  • ☐ No flashing or rapid motion
  • ☐ Critical content does not auto-advance without user control
  • ☐ Animations aid comprehension rather than serving purely decorative purposes
  • ☐ Static alternative available if motion is essential
  • ☐ User can control timing with clicks
  • ☐ No more than 3 flashes per second in any content