Motion · Interaction
Popover Origin
Popovers grow out of the element that opened them. Modals are the exception: they stay centered.
origin: center
origin: top left
Specs#
| Property | transform-origin: var(--radix-*-transform-origin) |
| Duration | 150–200ms |
| Easing | --ease-out |
| From | scale 0.95, opacity 0 |
| Built with | CSS only |
Guidelines#
Use for
- Dropdowns, popovers, tooltips, selects
- Anything anchored to a trigger
Avoid
- transform-origin: center on anchored overlays
- Origin-aware scaling on dialogs