Grow popovers from the trigger

Scale popovers from the trigger; modals stay centered.

Emil Kowalski@emilkowalski
An easy way to make your dropdowns feel better is to make them origin-aware. They should scale in from the trigger. In this case, `transform-origin: top left`. The default is `center` which feels wrong, as it appears out of nowhere.
Aug 15, 2025Demo 1 ↓View on X ↗
Emil Kowalski@emilkowalski
Radix & BaseUI support this out of the box with CSS variables. Radix has `--radix-dropdown-menu-content-transform-origin` and BaseUI `--transform-origin`. Just use that variable as your `transform-origin`.
Aug 15, 2025Demo 2 ↓View on X ↗
Emil Kowalski@emilkowalski
Making scale animations origin-aware is often overlooked, but it feels nicer.
Aug 28, 2023Demo 3 ↓View on X ↗

From emil-design-eng, “Make popovers origin-aware”.

The account menu

Open both menus, or replay them side by side.

From centerBad
transform-origin: center
From the triggerGood
transform-origin: top left
.dropdown {
  transform-origin: top left;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.dropdown[data-open] { transform: scale(1); opacity: 1; }

Four corners, one variable

Open all four, toggle the origin, open again.

Four corner menusBad
transform-origin: center
.DropdownMenuContent { transform-origin: var(--radix-dropdown-menu-content-transform-origin); }
.Popup { transform-origin: var(--transform-origin); }

Modals stay centered

Press Delete project on both sides.

Anchored to the buttonBad
transform-origin: <trigger>
CenteredGood
transform-origin: center

Why it matters, pros and cons

Why it matters

A popover continues what you clicked. Scaling from the trigger shows the link.

Pros

  • One line with Radix or Base UI.
  • The variable follows collision flips.
  • Adds causality without adding duration.

Cons

  • Hand-rolled popovers must recompute it on every flip.
  • Barely visible above scale 0.97.
  • Modals and toasts have no trigger to grow from.