My favourite animation trick: exponential smoothing (2023)

Original Article ↗ Hacker News Discussion ↗

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).