Fade Up
Also called Fade In Up, Reveal on Scroll
The element rises a short distance while fading in, as if settling into place.
Use for
Section headings, cards and images entering on scroll
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add a "Fade Up" entrance animation (also called fade-in-up or reveal on scroll) to [where].
Elements should rise slightly while fading in the first time they scroll into view: subtle and quick, not bouncy.
Animate once, and skip the motion when the user prefers reduced motion (prefers-reduced-motion).Similar motions
A
Fade In Directional
Also called Fade In Down, Fade In Left, Fade In Right
The element fades in while drifting a short distance from one side into its final position.
Use for
Section and card reveals on load or scroll
Add a "Fade In Directional" entrance animation (also called fade in left, fade in right or fade in down) to [where].
The element should fade in while drifting a short distance from one side into its final position: quick and smooth, easing out as it lands, without bounce.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).A
Slide In
Also called Slide In Up, Slide In Down, Slide In Left, Slide In Right
The element glides in from off its container edge to its resting position without fading.
Use for
Drawers, side panels, banners
Add a "Slide In" entrance animation (also called slide in left, slide in right, slide in up or slide in down) to [where].
The element should glide in from beyond its container edge to its resting place, fully opaque the whole time: quick, decelerating smoothly with no bounce.
Clip it at the container edge so it doesn't overlap neighbours or cause scrollbars while it is outside, and show it in place when the user prefers reduced motion (prefers-reduced-motion).Stagger
Also called Staggered Animation, Cascade
Items in a group animate one after another with a small delay, forming a wave instead of appearing all at once.
Use for
Lists, grids, navigation menus and search results
Add a "Stagger" animation (also called staggered animation or cascade) to [where].
Items should fade up one after another with a short, even delay, so the group appears as a quick wave instead of all at once.
Keep the whole sequence brief even for long lists, animate once when it scrolls into view, and skip the motion when the user prefers reduced motion (prefers-reduced-motion).A
Fade In / Fade Out
Also called Fade
The element goes from fully transparent to fully opaque in place, or the reverse when leaving.
Use for
Modals, toasts, page content appearing
Add a "Fade In / Fade Out" animation (also called fade) to [where].
The element should go from fully transparent to fully visible in place when it appears, and fade back out the same way when it leaves: gentle, with no movement or scaling.
Once it has faded out, make sure it can no longer be clicked or reached with the keyboard, and switch instantly when the user prefers reduced motion (prefers-reduced-motion).More in Entrance & Exit
ABCD
The element blinks on with rapid opacity flashes like a faulty neon sign before staying visible.
Use for
Neon and retro text effects
Add a "Flicker In" entrance animation to [where].
The element should blink on and off a few times at irregular intervals, like a faulty neon sign, before staying lit: sharp flashes with no movement.
Play it once, keep the flashes few and slow enough to be safe for people sensitive to flashing light, and show it steadily lit when the user prefers reduced motion (prefers-reduced-motion).A
The element makes a full turn around the Y axis while moving slightly toward the viewer and back.
Use for
Attention-drawing reveal of a card or badge
Add a "Flip" animation to [where].
The element should make one full turn around its vertical axis while coming slightly toward the viewer, then settle back with a tiny dip in size: lively but brief.
Give it perspective so the turn reads as depth, play it once rather than looping, and skip the turn when the user prefers reduced motion (prefers-reduced-motion).A
Flip In
Also called Flip In X, Flip In Y
The element rotates in 3D around its horizontal or vertical axis from edge-on to facing the viewer.
Use for
Card and tile reveals
Add a "Flip In" entrance animation (also called flip in X or flip in Y) to [where].
The element should start edge-on and rotate around its horizontal axis to face the viewer, swinging slightly past and back before it settles: quick, with a small wobble.
Give it perspective so the rotation reads as depth, and show it facing forward without motion when the user prefers reduced motion (prefers-reduced-motion).