Keyboard actions never animate

Palettes, shortcuts and focus jumps open and close instantly.

Emil Kowalski@emilkowalski

The same goes for keyboard-initiated actions. These actions may be repeated hundreds of times a day, an animation would make them feel slow, delayed, and disconnected from the user's actions. You should never animate them.

You Don't Need AnimationsRead article ↗

Emil Kowalski@emilkowalski

I use Raycast hundreds of times a day. If it animated every time I opened it, it would be very annoying.

You Don't Need AnimationsRead article ↗

From find-animation-opportunities and improve-animations.

Open, type, close

Press ⌘K or Ctrl K, type at once, Esc closes.

Animated duration 200ms

Scales inBad

0 late keys0.0s moving

AppearsGood

0 late keys0.0s moving

function toggle(open) {
  palette.hidden = !open;
  if (open) input.focus();
}
addEventListener("keydown", (e) => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    toggle(palette.hidden);
  }
});

Hold J or K

Focus the lists, then hold J or K.

Highlight transition 150ms Key repeat 30/s

Highlight slidesBad

0.0 rows behindmax 0.0

Highlight snapsGood

0.0 rows behindmax 0.0

.row[aria-selected="true"] { background: var(--accent-soft); }

Split by input or always 0ms

Click Actions, then Tab to it and press Enter.

Always animate Animate on click, instant on key Always instant

Keyboard-first surfaceMixed

button.addEventListener("click", () => {
  menu.hidden = !menu.hidden;
  if (!menu.hidden) menu.querySelector("[role=menuitem]").focus();
});
// e.detail === 0 means a keyboard click.

Why it matters

A shortcut promises a result. Motion makes keys land on a moving surface.

Pros

Output keeps pace with key repeat.
Typed text readable from the first frame.
An easy, unambiguous audit rule.

Cons

Instant can feel abrupt to occasional users.
Splitting by input means two looks for one surface.
Keep color feedback on the selected row.