71 Origin-Aware Popover. 71 of 95.
71/FLOATING GEOMETRY/71 of 95
Origin-Aware Popover
Motion should remember where the action came from.
The problem
A popover that scales from its center appears from nowhere, disconnected from the control that opened it.
The solution
Popover scales from the corner nearest its trigger — transform-origin matches the action.
Experiment
Play with the values
8px
0.92
0.65
How it works
- The click that opens the surface also identifies which trigger it came from.
- The trigger's center is measured in the same space as the popover.
- The vector from that center to the popover decides which corner is the origin.
- transform-origin is set to that corner so the motion points back at the action.
- The popover scales and fades from that origin instead of growing from its own middle.
Seen in
Dropdown menus
Menus scale from the trigger button, making it clear which control opened them.
Tooltips
Hints emerge from the element they describe rather than popping from center screen.
Context menus
Right-click menus animate from the cursor position for spatial continuity.
Action sheets
Mobile sheets rise from the button that invoked them, preserving cause and effect.