Hold slow, release fast

Slow while the user decides, fast when the system answers.

Emil Kowalskiemil-design-eng skill
Pressing should be slow when it needs to be deliberate (hold-to-delete: 2s linear), but release should always be snappy (200ms ease-out). This pattern applies broadly: slow where the user is deciding, fast where the system is responding.
Asymmetric enter/exit timingDemo 1 ↓View source ↗
Emil Kowalskiemil-design-eng skill
Make exit faster than enter (e.g., enter 2s, exit 200ms)
Fix for “Same enter/exit transition speed”Demo 2 ↓View source ↗

From emil-design-eng, “Asymmetric enter/exit timing”.

Hold to delete

Hold either button, then let go halfway.

SymmetricBad
invoice-0142.pdf2.4 MB

press 2000ms linear · release 2000ms linear
AsymmetricGood
invoice-0142.pdf2.4 MB

press 2000ms linear · release 200ms ease-out
.overlay {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 200ms var(--ease-out);
}
.button:active .overlay {
  clip-path: inset(0 0 0 0);
  transition: clip-path 2s linear;
}
.button:active { transform: scale(0.97); }

Enter vs exit on a modal

Open each dialog, then press Cancel.

exit is 2.0× faster
Same both waysBad
Acme workspace

enter 400ms · exit 400ms
Exit fasterGood
Acme workspace

enter 300ms · exit 150ms
.overlay {
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
}
.overlay[data-open] {
  opacity: 1;
  transition-duration: 300ms;
}
.dialog { transform: scale(0.96) translateY(6px); transition: transform 150ms var(--ease-out); }
[data-open] .dialog { transform: none; transition-duration: 300ms; }

Why it matters, pros and cons

Why it matters

A hold is a decision, so fill it slowly. Letting go is an answer: land it fast.

Pros

  • A mis-press costs 200ms, not 2s.
  • Linear fill doubles as a progress bar.
  • Fast exits never block the next action.

Cons

  • Holds tax every use; keep them for irreversible actions.
  • Hard to discover; always keep a keyboard path.
  • A slow modal entrance is still just slow.