Anti-pattern · Motion · Medium
Animate from scale(0)
Animating from scale(0) means an overlay grows out of nothing at its own centre instead of expanding from the element that triggered it.
The tell
A menu, tooltip or popover that expands from a point at its own centre.
Why it happens
scale(0) → scale(1) is the canonical "pop" in every animation library demo. It is also the easiest thing to write without knowing where the trigger is.
The rule
Start from 0.95–0.98 with transform-origin on the trigger edge, not from zero.
- Set transform-origin to the corner or edge nearest the trigger.
- Animate from scale(0.96) plus a 4-8px translate toward the trigger.
- Keep the whole entrance under 200ms so the connection reads instantly.
What is a Animate from scale(0)?
A dropdown that grows from scale(0) appears to materialise in mid-air, disconnected from the button you just pressed. Motion should describe the relationship between cause and effect: the panel comes from the trigger. Set transform-origin to the trigger edge and start from a small offset — 0.95 with an 8px translate reads as connected; 0 reads as teleported.
Paste this after your existing prompt to strip the pattern from the result.