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
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 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).Similar motions
A
Back In
Also called Back In Up, Back In Down
The element starts scaled down and offset, then slides in and grows to full size.
Use for
Hero elements and cards
Add a "Back In" entrance animation (also called back in up or back in down) to [where].
The element should arrive from beyond an edge while shrunk and slightly faded, then grow to full size once it reaches its place: a deliberate two-step move rather than a quick pop.
Play it once, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).A
The element pops up from a small rotated state, overshoots, and settles like a jack-in-the-box toy.
Use for
Surprise reveal
Add a "Jack In The Box" entrance animation to [where].
The element should pop up from a tiny, tilted state anchored at its bottom edge, rock from side to side past upright, and settle: springy and playful.
Play it once only, and show the element in place without motion when the user prefers reduced motion (prefers-reduced-motion).A
Zoom In
Also called Scale In, Zoom In Up, Zoom In Down
The element grows from a small, transparent state to full size while fading in.
Use for
Modals, image lightboxes, popovers
Add a "Zoom In" entrance animation (also called scale in) to [where].
The element should grow from small and transparent to full size while fading in: quick and smooth, with no overshoot.
Scale it from its center without affecting the surrounding layout, and show it in place without motion when the user prefers reduced motion (prefers-reduced-motion).A
Hover to play
Bounce Scale
Also called Bounce In / Out
The element scales with an elastic overshoot when hover starts or ends.
Use for
Buttons, badges
Add a "Bounce Scale" hover effect (also called bounce in / out) to [where].
The element should grow slightly larger with a springy, visible overshoot, briefly going past its final size before settling, and bounce back the same way when the pointer leaves.
Keep the surrounding layout from shifting, and show the same effect on keyboard focus.More in Entrance & Exit
A
The element bounces slightly and then shrinks or flies off an edge.
Use for
Playful dismissals
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).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).