Transitions
Motion patterns for feedback, state changes and progressive disclosure without visual distraction.
Hover lift
A small lift and shadow signal that a surface is interactive.
Scale feedback
Use a gentle scale response for compact controls and media previews.
Fade in and out
Fade transient content instead of abruptly removing it from the layout.
Saved views are now available to your team.
Slide reveal
Reveal supporting content with a short vertical transition after user intent.
Animated tabs
Move an indicator between active views to preserve orientation during navigation.
Content updates smoothly when the selected navigation state changes.
Loading transition
Move from a pending control to a completed state with clear feedback.
Staggered list
Use subtle stagger delays when a small group of related items enters together.
Reduced motion
Keep motion optional; use transition-safe classes and preserve clear static states.
This surface remains clear when reduced motion is enabled.
Clip-path reveal
Use a shape reveal for a high-impact panel transition without changing page layout.
A richer reveal for important, focused actions.
Animated workflow
Move stage state forward with both color and position changes to retain orientation.
Stage 1 of 4 - click a step to preview the animated change.
Notification stack
Animate incoming feedback into a stack so new messages are noticeable but not disruptive.
Content crossfade
Crossfade card content when a summary view changes instead of abruptly swapping the entire surface.
Three notes need a response before review.