Situations

Start here when you know the user moment. Pick the primary motion for that situation, then use alternatives only when the context changes.

Form submission

Keep the user anchored to the action they just took, then confirm the result without forcing a page-level transition. Avoid: Avoid full-screen loading for small form actions unless the whole page is blocked.

Open Button Loading State
Preview

List or feed loading

Skeletons preserve layout context and make the wait feel shorter than an isolated spinner. Avoid: Avoid skeletons when the final layout is unpredictable or the fetch usually completes instantly.

Open Skeleton Screen
Preview

Search flow

Search needs fast input affordance, lightweight loading feedback, and a graceful zero-result state. Avoid: Avoid decorative search animations on search-first pages where the input should always be visible.

Open Expandable Search Input
Preview

File upload

Uploads need measurable progress when possible, then clear success or retry feedback. Avoid: Avoid fake percentage progress if the system cannot estimate completion.

Open Progress Bar
0%
Preview

Onboarding guidance

Guide attention only when the next action is important enough to interrupt the normal interface. Avoid: Avoid highlighting many elements at once or repeating the same tour after acknowledgement.

Open Spotlight / Coach Mark
Cancel
New Feature
Preview

Error feedback

Errors should point to the exact fix before using broad page-level motion. Avoid: Avoid playful motion for destructive, financial, or security-sensitive failures.

Open Form Validation Error

Subscribe

Enter your email to join our newsletter.

Preview

Comparisons

Use this when two effects look close. The goal is choosing one pattern, not building a sequence.

Skeleton Screen vs Shimmer Loader

Use skeleton for layout context; add shimmer only when the placeholder would otherwise feel static during a longer wait.

Open Skeleton Screen
Selected

Spinner vs Progress Bar

Use spinner for short or unknown waits; use progress bar when completion is measurable or the wait is long.

Open Spinner / Loading Circle
Loading...
Selected

Toast vs Success Screen

Use toast for non-blocking confirmation; use a success screen when completion changes the user journey.

Open Toast Notification
Selected

Ripple vs Scale vs Haptic Bounce

Use scale for quiet button feedback, ripple for material-style surfaces, and haptic bounce for playful mobile-first actions.

Open Ripple Effect
Selected

Fade vs Shared Element Transition

Use fade for simple state changes; use shared element transitions when preserving object continuity matters.

Open Fade Transition
Content for Overview
Selected

Active Pill Slide vs Tab Underline

Use active pill slide for segmented controls and filter chips, tab underline for navigation tabs, and fade for the content change that follows selection.

Open Active Pill Slide

Selected mode

Overview

The moving pill shows continuity while the content below updates.

Selected

Motion Recipes

Use this for a workflow with several states. Follow the chain from first user action to final feedback.

Form Submit Feedback Chain

Disable the submitted button, show local progress, then confirm with a toast or success view depending on task importance.

Open Button Loading State
Step

List Loading Chain

Show structure while data loads, hand off to staggered content reveal, and handle the empty result without feeling broken.

Open Skeleton Screen
Step

Search Experience Chain

Make search available, indicate fast querying, then distinguish result reveal from a true no-result state.

Open Expandable Search Input
Step

Upload Chain

Prefer real progress, fall back to indeterminate motion only when progress is unknown, then show clear completion or retry feedback.

Open Progress Bar
0%
Step

Onboarding Chain

Start with focused guidance, move to subtle reminders, and make completion visibly accumulate.

Open Spotlight / Coach Mark
Cancel
New Feature
Step

Interactive Choice Chain

Give the tap a small press response, slide the selected pill to preserve state continuity, then fade the content into the newly selected result.

Open Scale on Press
Step

Anti-patterns

Use this as a pre-flight check. If your current motion matches the problem, switch to one of the safer alternatives.

Avoid

Endless Spinner

A spinner that runs for long waits without explaining what is happening.

Open Skeleton Screen
Better

Avoid

Fake Progress Bar

A determinate bar that advances without real progress data and then stalls near the end.

Open Indeterminate Progress Bar
Better

Avoid

Slow Modal Entrance

A modal that feels theatrical when the user expects immediate task focus.

Open Modal Enter / Exit
Better

Avoid

Aggressive Hover Motion

Cards jump, tilt, or shift so much that scanning a grid becomes unstable.

Open Hover Lift Effect
Better

Avoid

No Reduced Motion Fallback

Large parallax, blur, or looping motion runs for every user regardless of accessibility preferences.

Open Fade Transition
Content for Overview
Better