Tooltip Fade
Also called Tooltip reveal
A small label fades and nudges into place next to an element after a short hover delay.
Use for
Icon hints, truncated text
Variants
- fade
- fade + slight slide
- instant-on after first tooltip
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 "Tooltip Fade" (also called a tooltip reveal) to [where].
After a short hover delay, the label should fade in while nudging slightly into place next to the element, then disappear quickly with no delay when the pointer leaves.
Show it on keyboard focus too, let Escape dismiss it, and connect it to the element so screen readers read it.Similar motions
A
Click to play
Popover / Dropdown Open
Also called Menu pop, Popover pop-in, Dropdown scale-fade
A floating menu fades and scales in from the point where its trigger sits.
Use for
Dropdown menus, popovers, select lists
Add a "Popover / Dropdown Open" animation (also called a menu pop or dropdown scale-fade) to [where].
The menu should fade in while growing slightly out of the corner next to its trigger, quick and crisp, and fade out a little faster when it closes.
Keep it anchored to the trigger, close it with Escape or a click outside, and expose the open state on the trigger for screen readers.A
Hover to play
Speech Bubble
Also called Bubble
A small speech-bubble triangle appears on one side of the element on hover.
Use for
Tabs, tooltips
Add a "Speech Bubble" hover effect (also called bubble) to [where].
A small triangle tail should slide out from behind one side of the element, turning it into a speech-bubble shape, and slide back in when the pointer leaves: quick and smooth.
Keep the tail the same color as the element so they read as one shape, and show the same effect on keyboard focus.A
Toast Slide-In
Also called Snackbar, Toast notification, Toast stack
A brief message slides or fades in at a screen edge, waits, then leaves; stacked toasts shift to make room.
Use for
Save confirmations, errors, undo prompts
Add a "Toast Slide-In" (also called a snackbar or toast notification) to [where].
Each message should slide up from the screen edge and fade in, decelerating smoothly; when a new toast arrives, the ones already shown should shift over smoothly to make room.
Announce the message to screen readers without stealing focus, keep it up long enough to read, and pause the auto-dismiss on hover or focus.More in Component & Layout
- A
- B
- C
Click to play
Accordion Expand-Collapse
Also called Collapse, Disclosure, Expandable section
A content panel smoothly grows to its full height or shrinks to zero when its header is toggled.
Use for
FAQs, settings groups, sidebar trees
Add an "Accordion Expand-Collapse" effect (also called a collapse or disclosure) to [where].
When a header is pressed, its panel should smoothly grow to the full height of its content and shrink back to nothing on the next press, with the header's arrow turning to match: quick and smooth, no bounce.
Animate to the content's real height rather than a fixed guess, keep the header a real button that exposes its expanded state, and make it work from the keyboard.A
Backdrop Scrim Fade
Also called Overlay fade, Scrim
A translucent dark layer fades in behind an overlay to dim the page.
Use for
Behind modals, drawers, sheets
Add a "Backdrop Scrim Fade" (also called an overlay fade or scrim) to [where].
When the overlay opens, a translucent dark layer should fade in softly over the page behind it, a little slower than the overlay itself, and fade out again when it closes.
Keep the scrim dark in both light and dark themes, and stop the page behind it from scrolling or taking clicks while it is shown.A
Bottom Sheet Slide-Up
Also called Bottom drawer, Sheet
A panel slides up from the bottom edge, often draggable and snapping to heights.
Use for
Mobile actions, share menus, filters
Add a "Bottom Sheet Slide-Up" (also called a bottom drawer or sheet) to [where].
The panel should slide up from the bottom edge while the page behind it dims, decelerating smoothly into place without a bounce.
Play it once each time the sheet opens, slide it back down on close, and keep keyboard focus inside the sheet while it is open.