Origin-aware animation
Also called origin-aware popover
A popover, menu, or tooltip that grows out of the button that opened it, by setting its transform origin on the side facing the trigger.
import { Menu } from '@base-ui/react/menu';
const items = ['New page', 'New database', 'Upload file'];
export function CreateMenu() {
return (
<Menu.Root>
<Menu.Trigger className='rounded-full bg-primary px-4 py-2 text-sm font-medium text-primary-foreground'>
Create
</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner sideOffset={8} align='start'>
{/* Base UI sets --transform-origin to the corner nearest the trigger:
top left below the button, bottom left when it flips above. */}
<Menu.Popup className='min-w-44 origin-(--transform-origin) rounded-xl border bg-background p-1 shadow-lg outline-none transition-[opacity,scale] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-safe:data-ending-style:scale-95 motion-safe:data-starting-style:scale-95'>
{items.map((item) => (
<Menu.Item
key={item}
className='rounded-lg px-3 py-2 text-sm outline-none data-highlighted:bg-muted'
>
{item}
</Menu.Item>
))}
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
);
}Animate the dropdown menu so it scales from 0.95 to 1 and fades in over 150ms with cubic-bezier(0.23, 1, 0.32, 1), growing from the corner closest to its trigger: top left when it opens below the button, bottom left when it flips above. Use the transform-origin CSS variable the positioning library provides, and skip the scale when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Origin-aware animation?
When a dropdown scales in from its own center, it seems to appear out of thin air. Setting transform-origin to the corner or edge closest to the trigger makes it unfold out of the button instead, so the eye connects the click with the result. The same idea applies to tooltips growing from their arrow and context menus growing from the cursor.
The origin has to follow the real placement. Positioning libraries flip a menu above its button when there is no room below, and then it should grow from its bottom edge. Base UI sets a --transform-origin CSS variable and Radix sets one per component, such as --radix-popover-content-transform-origin, so you can use the computed value directly.
Keep the motion subtle: scale from 0.95 to 1 with a fade over 150 to 200ms. Modals are the usual exception, since they belong to the whole page and look right growing from the center.
Often confused with
- Transform origin
- Transform origin is the CSS property that sets the pivot point. Origin-aware animation is the design practice of pointing it at the trigger.
Related terms
All termsTransform origin
The point an element rotates and scales around. It defaults to the center, and moving it changes where a transform seems to start.
Popover
A small floating panel anchored to the button that opened it, often with an arrow, holding a few controls and closing when you click outside.
Dropdown menu
A list of actions that drops down from a button when you click it, then closes as soon as you pick one.
Spatial consistency
Moving elements in ways that match where things live in the interface, so people can tell where an item went and how to find it again.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.