Interaction frequency and motion

A command-list highlight with 0, 150, or 300 ms transitions, tested while holding arrow keys.

004 · MotionSupportedStarted 2026-10-01 · updated 2026-10-03

Demo width

Full768375

Loading demo…

Principles

Frequently repeated actions, especially keyboard-driven ones, should avoid animation; save motion for infrequent, meaningful changes.

EmpiricalBaudisch et al. (2006)Waiting for animation is most frustrating when users do not need an explanation, particularly for familiar actions.
TheoryMiller (1968)Acceptable response time depends on the purpose of the action.
EmpiricalChallengesKlein & Bederson (2005)Animated scrolling improved reading speed and reduced errors, even though scrolling is frequently repeated.

Hypothesis

If a list highlight moves instantly, it should never lag behind the logical selection while an arrow key is held; at 150 and 300 ms it should lag in most frames.

Measured by: Simulate 40 arrow-key presses every 33 ms (down, up, down, up). Measure the distance between the highlight and selected row each frame, counting lag over 2 px. Also measure time to settle after the last press and single-press latency.
Falsified if: Falsified if the 150 ms variant lags on fewer than half the frames or never falls more than one row behind.

Implementation

A · 0 ms: The highlight moves immediately.
B · 150 ms: 150 ms ease-out transform transition.
C · 300 ms: 300 ms ease-out transform transition.

The list uses role=listbox with aria-activedescendant and supports arrow keys, Home, End, and Enter. One highlight element moves with transform, so duration is the isolated variable.

The instrument emits synthetic keydown events at frame boundaries every 33 ms (about 30 Hz, resembling system key repeat) following a pattern that never wraps the list.

The initial instrument read the DOM right after dispatchEvent, before React applied state updates in the microtask, making the 0 ms highlight appear late in 51% of frames. This was an instrument artifact rather than a visible result: microtasks complete before the next painted frame. The instrument now waits for the microtask before measuring.

Under prefers-reduced-motion: reduce, all variants use 0 ms.

Observations

Holding an arrow key

Press once from rest, then press 40 times every 33 ms. Three repetitions at 1280 px and one at 375 px; tabulated ranges cover all runs.

Chromium 154 (Playwright, headless), 60 Hz, 2026-10-01, 1280×900 and 375×812

Variant	Frames with lag	Average lag	Maximum lag	Settle after last press	Single-press settle
A · 0 ms	0 %	0 px	0 px	0 ms	0 ms
B · 150 ms	100 %	40,4–40,7 px (±1 baris)	62–71 px	82–83 ms	99–100 ms
C · 300 ms	100 %	65,0–65,2 px (±1,6 baris)	92–101 px	199–200 ms	199–200 ms

While the key was held, the animated highlight was never aligned with the selected row on any sampled frame. It averaged one row behind (150 ms) or 1.6 rows behind (300 ms) and continued moving for 82–200 ms after release. Without animation it was always aligned.

Reduced motion

Repeat the experiment with prefers-reduced-motion: reduce emulated.

Chromium 154 (Playwright, headless), 60 Hz, 2026-10-01, 1280×900

Variant	Frames with lag	Settle after last press
A · 0 ms	0 %	0 ms
B · 150 ms	0 %	0 ms
C · 300 ms	0 %	0 ms

With reduced motion all three variants behaved identically to A.

Cross-browser replication: holding arrow keys

Run the same Measure instrument through Playwright: open the demo, measure the actual rAF rate over 60 frames, click Measure, and read the results. Three trials at 1280 px and one at 375 px per engine. Frame intervals were 16.66–16.95 ms (about 60 Hz).

Firefox 155 and WebKit 26.6 (Playwright, headless), 60 Hz, 2026-10-03, 1280×900 and 375×812

Variant	Frames with lag	Average lag	Maximum lag	Settle after last press	Single-press settle
A · 0 ms	0 %	0 px	0 px	0 ms	0 ms
B · 150 ms	100 %	38,5–40,8 px (±1 baris)	59–63 px	81–83 ms	99–101 ms
C · 300 ms	97–100 %	60,4–65,4 px (±1,5–1,6 baris)	84–93 px	197–200 ms	195–201 ms

Both engines reproduced the Chromium pattern: animated highlights lagged in nearly all frames while the nonanimated highlight remained accurate. Differences were small and far from the falsification threshold: Firefox C lagged in 97–100% of frames (mean 60.4–61.5 px), WebKit C in 100% (mean 65.1–65.4 px), similar to Chromium (65.0–65.2 px).

Cross-browser replication: reduced motion

Repeat under emulated reduced motion, one run per engine at 1280 px.

Firefox 155 and WebKit 26.6 (Playwright, headless), 60 Hz, 2026-10-03, 1280×900, reduced motion

Variant	Frames with lag	Settle after last press
A · 0 ms	0 %	0 ms
B · 150 ms	0 %	0 ms
C · 300 ms	0 %	0 ms

Both engines matched Chromium: reduced motion made all three variants 0 ms and the highlight never lagged.

Findings

Supported

During rapid keyboard repetition, 150–300 ms highlight animations lagged behind the logical selection in 100% of sampled frames, averaging 1–1.6 rows behind, and kept moving for 82–200 ms after release. Without animation, the highlight remained accurate. Potential benefits for rare single actions, such as visual continuity, were not measured.

Limitations

Key repeat was simulated at 30 Hz. System settings vary, and the 150 ms variant may lag less at slower repeat speeds.
Chromium 154, Firefox 155, and WebKit 26.6 headless at roughly 60 Hz; real browsers/devices and 120 Hz displays were not tested.
Selection speed or accuracy by human users was not measured, only highlight position.
Only one ease-out curve was tested.
Klein & Bederson (2005) found that 300 ms animated scrolling accelerated reading and reduced errors. This finding applies only to keyboard-driven highlights, not scrolling.

Evaluation

Usability: Users can try the list directly using arrows, Home, End, and Enter; the executed command appears below the list.
Accessibility: The list uses role=listbox with aria-activedescendant and aria-selected options; Enter outcomes are announced via role=status. All variants become 0 ms under reduced motion. axe-core 4.10 found zero violations.
Responsive: The list has a 28rem maximum width and narrows without overflow at 375 px. Measured outcomes matched at 375 and 1280 px.
Performance: Only transform animates. Demo JavaScript is about 154 KB.
Craft: One moving highlight element isolates duration, rather than a per-row background. Selected-row text changes color immediately, so selection remains identifiable even when the highlight lags.

Area: Motion