Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

animationsimpeccable

No Bounce or Elastic Easing

NEVER

NEVER: Let a UI element overshoot its final position: no `animate-bounce`, no animation named `bounce|elastic|wobble|jiggle|spring`, and no `cubic-bezier()` whose y1 or y2 falls outside `[-0.1, 1.1]`. Ease out with exponential curves (ease-out-quart / quint / expo).

Ease out with exponential curves and never let a UI element overshoot its final position

Bad

Good

Why it matters

The detector flags any animation-name matching bounce|elastic|wobble|jiggle|spring, Tailwind's animate-bounce, and — the precise part — any cubic-bezier() whose y1 or y2 falls outside the range [-0.1, 1.1], because a control point past the 0–1 band is exactly what overshoot is. Real objects decelerate into a stop; they do not sail past their destination and spring back.

Overshoot on a modal or a toast reads as dated and, on anything a user opens dozens of times a day, as broken. Note this is not a duplicate of "Easing Fits Subject", which only asks that a curve match its subject and never bans overshoot — this principle draws the hard line.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.