35 / MOTION
Transform Origin
The problem
A menu that scales from its center reads as appearing from nowhere, disconnected from the button that opened it.
The solution
The menu scales from the corner nearest its trigger.
Experiment
Task: Open the menu from different corners.
NAIVE
origincenter
THOUGHTFUL
origin—
Play with the values
0.8
220ms
How it works
Seen in
Dropdown menus
Menus grow from the button corner, reinforcing the connection to the trigger.
Tooltips
Hints scale from the edge closest to the element they describe.
Zoom effects
Images scale from the cursor position for a natural focal point.
Popovers
Floating panels expand from the side facing their anchor.