Grow from the trigger

Enter from scale(0.95) at the trigger; modals stay centered.

From improve-animations, §3 Physicality & origin.

The pinprick pop

Open both, then scrub to 10%.

From scale(0)High
scale(0) → scale(1)
From scale(0.95)Good
scale(0.95), opacity 0 → 1
.popover {
  transform-origin: top center;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.popover[data-state="closed"] { transform: scale(0.95); opacity: 0; }
.popover[data-state="open"]   { transform: scale(1);    opacity: 1; }

One origin per corner

Open each corner's menu; the dot marks the origin.

Origin: centerMedium
transform-origin: center
Origin: triggerGood
var(--radix-dropdown-menu-content-transform-origin)
/* Radix */
.dropdown  { transform-origin: var(--radix-dropdown-menu-content-transform-origin); }
.popover   { transform-origin: var(--radix-popover-content-transform-origin); }
/* Base UI */
.popup     { transform-origin: var(--transform-origin); }

/* Hand-rolled */
.menu[data-side="bottom"][data-align="start"] { transform-origin: top left; }

Modals stay centered

Open both dialogs from the corner trigger.

Origin at the triggerWrong here
transform-origin: bottom left
Origin at centerCorrect, exempt
transform-origin: center
.dialog {
  transform-origin: center;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.dialog[data-state="closed"] { transform: scale(0.95); opacity: 0; }

Why it matters, pros and cons

Why it matters

A panel grown from its trigger shows where it came from.

Pros

  • The first frame is already readable.
  • Small travel keeps 150–200ms calm.
  • Radix and Base UI expose the origin.

Cons

  • Modals and sheets: keep center or slide from an edge.
  • Hand-rolled positioning must flip the origin per side.
  • Frequent keyboard menus may be better with no animation.