Bounce Out
The element bounces slightly and then shrinks or flies off an edge.
Use for
Playful dismissals
Variants
- center
- down
- up
- left
- right
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 "Bounce Out" exit animation to [where].
The element should dip slightly, swell a little past its size, then shrink away while fading out: short and springy.
Remove it from the layout only after the animation ends, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).Similar motions
A
The element shrinks and slides off toward an edge while fading out.
Use for
Dismissing cards
Add a "Back Out" exit animation to [where].
The element should first shrink back slightly in place, then slide off toward an edge while fading out: a deliberate two-step exit, not a single quick fade.
Remove the element only after the animation ends so the layout doesn't jump mid-motion, and remove it instantly when the user prefers reduced motion (prefers-reduced-motion).A
Zoom Out
Also called Scale Out
The element shrinks and fades until it vanishes.
Use for
Closing modals and dismissing items
Add a "Zoom Out" exit animation (also called scale out) to [where].
The element should shrink toward its center while fading until it vanishes: quick, speeding up as it goes.
Remove it from the layout and from keyboard focus only after it has vanished, and hide it instantly when the user prefers reduced motion (prefers-reduced-motion).A
Bounce In
Also called Bounce In Down, Bounce In Up
The element enters with an overshoot-and-settle bounce, either scaling up or dropping in from an edge.
Use for
Notification badges, playful modals
Add a "Bounce In" entrance animation (also called bounce in down or bounce in up) to [where].
The element should grow from small, overshoot its full size and wobble a few times before settling: quick and springy.
Play it once so it doesn't keep pulling attention, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).More in Entrance & Exit
A
Clip Reveal
Also called Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
A clip-path or mask grows from an edge or point so the image or text is progressively uncovered.
Use for
Image and headline reveals
Add a "Clip Reveal" entrance effect (also called mask reveal, wipe reveal or image reveal) to [where].
A clipping edge should sweep across from left to right so the content is uncovered progressively while it stays still: smooth, starting and ending softly.
Reserve the element's space from the start so nothing shifts, and show it fully uncovered 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).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).