My favourite animation trick: exponential smoothing (2023)

Original Article ↗ Hacker News Discussion ↗

Exponential smoothing as a lightweight animation technique for UI elements, illustrated with toggle switches and map panning, prompts both enthusiasm and skepticism. Many developers appreciate its frame-rate–independent smoothness and its value for conveying motion and state changes, especially in complex views like animated graphs or maps. Others argue that most modern UI animations add latency, ambiguity (particularly with toggle switches vs checkboxes), and accessibility issues, and call for instant, consistent, and native controls—ideally respecting system settings like “prefers-reduced-motion.”

Scope of the article / technique

  • Many readers like the clear explanation and interactive demos of exponential smoothing and easing.
  • Several note this is a well-known idea in games/Flash days (easing, spring functions, PID/proportional control) but still useful to see explained cleanly.
  • Some emphasize the key benefit: a stateless way to smooth movement that works regardless of frame rate or changing targets (e.g., camera motion, inertial scrolling), not just another 0→1 easing curve.

Value of UI animation

  • Supporters argue animations:
    • Help users track state changes and understand “where things went” (e.g., map panning, window minimization).
    • Provide feedback that input was registered, especially on touchscreens where fingers obscure controls.
    • Make interfaces feel “polished” and emotionally pleasant, which matters for many users.
  • Critics argue:
    • Animations often add latency, feel sluggish, and are unnecessary for simple binary controls.
    • Instant, “snappy” interfaces are better for productivity and frequent use.
    • Many real-world implementations are slow, janky, or block input, so the technique is often misapplied.

Toggles vs checkboxes and control semantics

  • Heated debate on whether animated switches are a good metaphor:
    • Some say toggles are clearer for immediate system state (lights on/off, mode A/B), while checkboxes belong in forms.
    • Others find switches ambiguous: hard to see which side is “on”, often rely only on color, and can be mistaken for draggable sliders.
    • Several argue classic checkboxes/radio buttons with clear labels are more accessible, discoverable, and culturally robust.

Accessibility, preferences, and “reduce motion”

  • Multiple commenters disable animations OS-wide and report UIs feeling faster and calmer.
  • Others point out OS and browsers support prefers-reduced-motion; web UIs should respect it but often don’t.
  • Color-only state indication is criticized, especially for colorblind and e‑ink users; shape, labels, and contrast are preferred.

Implementation & performance

  • Some see the JS-heavy, canvas-based demos as over-engineered and note serious performance/freeze issues in Firefox and mobile browsers.
  • Others stress that in production you’d typically use CSS transitions/easing or carefully tuned spring functions, not many requestAnimationFrame loops.
  • There’s discussion of exponential smoothing’s asymptotic behavior and alternatives (quadratic / sqrt-based approaches, friction terms, PID control).