Motion & Interaction

If you incorporate motion and interaction into your website or application, make sure that your efforts are:

• Purposeful. There should be a functional basis or purpose; animations should not be included for aesthetic purposes only.
• Not overwhelming. Subtlety is key. Users should not be overwhelmed by movement. To avoid overwhelming people, avoid rapid movements across large areas and do not autoplay media. Avoid having multiple simultaneous animations, too.
• Consistent. If you use multiple animations across pages, they should be predictable.
• Controllable (if applicable and appropriate). Make sure that users can pause or stop animations.
• Not too flashy (literally). No animation should flash more than 3 times per second.
• Supportive of Reduced Motion preferences. Your animations, transitions, and scroll behavior should respect a user's preference.
• Avoid extreme contrast changes. Try to keep total contrast ratio changes under 30% for the duration of the animation.

Respecting User Preferences

Media queries for prefers-reduced-motion can be very useful for disabling animations and transitions altogether or adjusting durations. This media feature, though, is only useful if a user has a device or system-level preference for reduced motion set. If your website or application allows users to set site-specific preferences, consider adding a motion sensitivity setting for the user. To learn more about using media queries to support reduced motion, visit MDN Web Docs prefers-reduced-motion.

Example Query

@media (prefers-reduced-motion: reduce) { .animation-class { // Disable animations and transitions, recommended for non-essential animation: none; transition: none; // OR Slow speeds, recommended for essential animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }

Types of Motion

There are two basic types of motion: essential and non-essential. When you're giving a user important information (feedback, alerts, and similar), it is essential. If you're using animations for decorative purposes (parallax effects, background movements, etc.), that type of motion is non-essential. In general, non-essential motion should be avoided or limited. All motion should respect a user's preferences and be created with best practices in mind.

Why Limit Motion?

A lot of people are negatively affected by motion, especially when it is excessive or best practices (like avoiding or reducing flashing) aren't followed. Regardless of difference or disability, many people find animations distracting. Some people are uniquely affected by motion, including:

• People with vestibular disorders. Animations can trigger dizziness, nausea, and even disorientation. Parallax effects may be especially bothersome.
• People with seizure disorders like epilepsy. Flashing and strobing can trigger seizures, especially when the frequency is between 3 and 60 flashes per second. Big contrast changes and certain movements can be triggers, too.
• People with migraines. Rapid movements, transitions, and big changes in brightness or contrast may trigger migraines or make them worse.
• People who are motion sensitive. People who get motion sickness can feel ill when exposed to certain animations. Scrolling and zooming effects might be especially problematic.
• People with attention differences. Stuff that moves can be really distracting. Animations can make it hard for many people to focus on the primary content.
• People with visual processing differences. When things are in motion, they can be difficult to track or comprehend.

Resources to Learn More

• A primer to vestibular disorders from the A11Y Project. Learn about using media queries to reduce the impacts on people with vestibular disorders.
• Photosensitive epilepsy from the Epilepsy Society. Dive deeper into the patterns that can trigger seizures.
• The impact of motion animation on cognitive disability from TPGi. Learn more about cognitive load, how motion can affect people with certain differences, and how to use helper functions for JavaScript-triggered animations.
• The ultimate guide to proper use of animation in UX from the UX Collective. See timing and effects in real-time and learn the rationale behind them.
• Animation and motion standards from ASU. Dive deeper on transition types, timing considerations, and more.

Example Motion Types and Recommended Strategies

Example Timing

The duration of your animation should be informed by the kind of thing you're working with. As an example, a complex animation should have a maximum duration of about 800ms. A micro-interaction's duration can be as small as 100ms.

• If your animation is longer than 500ms, make sure to add user controls (like pause).
• If your media content is timed, be sure to let users replay the content.

Navigation

• Pages: 300-500ms fade
• Menus: 200ms scale + fade
• Modals: 250ms scale from center + fade

Example CSS 

.navigation-page-transition { animation: fadeSlideIn 400ms cubic-bezier(0.4, 0.0, 0.2, 1); }

State Changes

• Hover: 150ms with subtle scaling (102 to 105%)
• Active or Pressed: 100ms scale reduction (98%)
• Selected: 200ms background-color transition
• Focus, Error, and Success: 200ms. Be sure to include a focus ring or indicator when applicable.

Example CSS

.state-change-hover { transition: transform 150ms ease-out; } .state-change-hover:hover { transform:scale(1.02); }

Content Changes

• Data items: 200ms fade + slide
• Loading: 300ms fade
• Lazy Loading: 200ms fade (for images)

Micro-interactions

• Button feedback: 100ms scale
• Toggles and Form Elements: 150ms translate or scale
• Tooltips: 150ms fade + slide
• Dropdown menus: 200ms scale + fade

Example CSS

.micro-interaction-button-press { animation: transition: transform 100ms ease-in-out; } .micro-interaction-button-press:active { animation: scale(0.98); }

Progress Indicators

• Spinners: 1s
• Upload or Download Progress: Dependent on real progress, variable.

Interaction Basics

• Touch and Click Targets. For most targets, you should aim for a minimum size of 44x44px with 8px of spacing between targets.
• Feedback. The feedback you provide users should be quick, but the ideal response time depends on what you're providing feedback about. Most types of feedback should be provided within 100 to 200ms and, if applicable, at regular intervals. As an example, progress updates should be provided around every 2 seconds or so.

Unique and Complex User Interactions

Some user interactions are more problematic than others for all users, including those with disabilities. We strongly recommend avoiding these types of interactions and, instead, opting for simpler and more accessible alternatives. If you must use complex or unique interactions, alternative engagement methods must be clearly visible and easily discoverable. Examples of interaction types to avoid:

• Drag and Drop (Use When Necessary). If you must use a drag-and-drop component in your UI, make sure that you provide clear and predictable keyboard controls.
• Hover-Dependent Tooltips and Menus (Try to Avoid). Always include focus states and keyboard triggers. Be mindful of timing, too, so that users (regardless of their interaction method) have time to digest the information being presented.
• Pinch-to-Zoom (Use When Necessary). Make sure to provide keyboard shortcuts, buttons, or both to help everyone have an equitable experience.
• Complex Gestures (Try to Avoid). If you can't get away from complex or multitouch gestures, make sure to offer simple click or tap alternatives that accomplish the same goal.

Dive Deeper

• WCAG 3.0: The draft requirements for Gestures offer simple, actionable dos and don'ts.