Web Motion Atlas

Before using it Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.

Implement this effect in HTML, CSS and JavaScript.
Scroll timeline / Timeline on scroll
A line grows with scrolling and reveals milestones in order.
Use it for: History, project stages, onboarding
scroll + transform
Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.

Implement this effect in HTML, CSS and JavaScript.
Scroll text reveal / Scroll text reveal
Words gain color as the reader moves through a short message.
Use it for: Brand statements and short introductions
scroll + opacity
Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.

Implement this effect in HTML, CSS and JavaScript.
Stacking cards / Stacking cards
The next card rises over the previous one, which recedes in depth.
Use it for: Services and a sequence of case studies
scroll + transform
Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.

Implement this effect in HTML, CSS and JavaScript.
Background color change / Background color change
The background palette follows the reading position.
Use it for: Chapter boundaries and changes of theme
scroll + background-color
Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.

Implement this effect in HTML, CSS and JavaScript.
Hide-on-scroll header / Hide-on-scroll header
Navigation hides when scrolling down and returns when scrolling up.
Use it for: Long articles and mobile navigation
scroll direction + transform
Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.

Implement this effect in HTML, CSS and JavaScript.
Scrollspy / Scrollspy
The selected table-of-contents entry follows the visible section.
Use it for: Long guides and product specifications
scroll position + aria-current
Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.

Implement this effect in HTML, CSS and JavaScript.
Back-to-top button / Back to top
A button appears after scrolling and returns to the beginning.
Use it for: Long lists and revisiting an article
scrollTo + focus
Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.

Implement this effect in HTML, CSS and JavaScript.
Scroll zoom / Scroll zoom
A scene enlarges to bring a subject closer.
Use it for: Product details and key visuals
scroll + scale
Keep content readable and preserve normal scrolling. Show the complete state when reduced motion is enabled.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.

Implement this effect in HTML, CSS and JavaScript.
3D tilt / 3D tilt
A card tilts in perspective toward the pointer.
Use it for: Portfolio cards and product showcases
pointermove + perspective
Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.

Implement this effect in HTML, CSS and JavaScript.
Spotlight hover / Spotlight hover
A light follows the pointer and illuminates the card boundary.
Use it for: Feature choices and focused items
radial-gradient + Pointer Events
Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.

Implement this effect in HTML, CSS and JavaScript.
Image swap on hover / Image swap on hover
Hover or tap to reveal another product color or view.
Use it for: Color variants and front/back comparisons
opacity + :focus-visible
Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.

Implement this effect in HTML, CSS and JavaScript.
Text roll / Text roll
Text moves upward while its replacement enters from below.
Use it for: Short links and navigation
overflow + translateY
Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.

Implement this effect in HTML, CSS and JavaScript.
Hover image preview / Hover image preview
Touch a list entry to reveal a preview for that place.
Use it for: Portfolio lists and destination comparisons
pointermove + focus
Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.

Implement this effect in HTML, CSS and JavaScript.
Floating label / Floating label
The label moves above the input and remains visible while typing.
Use it for: Contact and signup forms
label + :placeholder-shown
Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.

Implement this effect in HTML, CSS and JavaScript.
Inline validation / Inline validation
An error and its correction appear beside the input.
Use it for: Checking an email address format
ValidityState + aria-invalid
Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.

Implement this effect in HTML, CSS and JavaScript.
Loading button / Loading button
The button shows progress and completion and prevents repeat actions.
Use it for: Feedback after saving or submitting
disabled + aria-busy
Do not require hover. Offer the same content by touch and keyboard. Form examples stay on this device and send nothing.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.

Implement this effect in HTML, CSS and JavaScript.
View transition / View transition
A shared image connects the card and its detailed view.
Use it for: Moving from a list to details
document.startViewTransition
Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.

Implement this effect in HTML, CSS and JavaScript.
Lightbox / Lightbox
Open an enlarged image and return to its original location.
Use it for: Photos, portfolios and diagrams
dialog.showModal + close
Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.

Implement this effect in HTML, CSS and JavaScript.
Hotspots / Hotspots
Select a marker on a diagram to read about that part.
Use it for: Product anatomy and location guides
button + aria-expanded
Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.

Implement this effect in HTML, CSS and JavaScript.
Countdown timer / Countdown timer
Time remaining decreases to zero and then stops.
Use it for: Deadlines and event start times
performance.now + timeout
Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.

Implement this effect in HTML, CSS and JavaScript.
Animated shape divider / Animated shape divider
A moving wave joins two adjacent sections.
Use it for: Hero boundaries and chapter breaks
SVG path + transform
Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.

Implement this effect in HTML, CSS and JavaScript.
Like animation / Like animation
A heart briefly pops as the selected state changes.
Use it for: Favorites and save feedback
aria-pressed + Web Animations
Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.

Implement this effect in HTML, CSS and JavaScript.
Scroll cue / Scroll cue
A downward movement hints at more content; activation moves to it.
Use it for: Leading from the first view to the article
scrollIntoView + focus
Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.

Before using it Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.

Implement this effect in HTML, CSS and JavaScript.
Background video / Background video
Play a scene behind a readable foreground message.
Use it for: Travel, spaces and brand introductions
video + muted + playsinline
Keep content accessible and provide pause or close controls. Preserve access in browsers without the effect.
Match the target, trigger and behavior above. Support 320px width, keyboard and prefers-reduced-motion; preserve reading order and focus.