Springs use bounce: 0

Production springs use bounce: 0, at most 0.1, never on utility UI.

Jakub Krehel@jakubkrehel · better-ui skill
Use `transition: { type: "spring", duration: 0.3, bounce: 0 }`. Bounce is always `0`.
jakubkrehel/skillsView source ↗
Jakub Krehelvia design-motion-principles
transition={{ type: "spring", duration: 0.45, bounce: 0 }} transition={{ type: "spring", duration: 0.55, bounce: 0.1 }}
Motion cookbook §2@jakubkrehel on X ↗

From design-motion-principles, Jakub’s spring recipe.

A dropdown you open all day

Open both menus, or press Open 10×.

0×
Bouncy springBad
bounce: 0.35
bounce: 0Good
duration: 0.3, bounce: 0
<motion.div
  initial={{ opacity: 0, scale: 0.95, y: -4 }}
  animate={{ opacity: 1, scale: 1, y: 0 }}
  transition={{ type: "spring", duration: 0.3, bounce: 0 }}
  style={{ transformOrigin: "top" }}
/>

A toggle, clicked rapidly

Flip each switch, or press Flip 8× fast.

bounce: 0.4Bad
Auto-save drafts
{ type: "spring", duration: 0.45, bounce: 0.4 }
bounce: 0Good
Auto-save drafts
{ type: "spring", duration: 0.3, bounce: 0 }
<motion.span
  className="thumb"
  animate={{ x: checked ? 20 : 0 }}
  transition={{ type: "spring", duration: 0.3, bounce: 0 }}
/>

Same spring, two places

Set the shared bounce, then press Play.

Kids app · lesson doneFits
3 stars
Settings modalFlag
Settings
CurrencyUSD
Week startsMonday
Time zoneUTC−3
const utility = { type: "spring", duration: 0.3, bounce: 0 };
const reward  = { type: "spring", duration: 0.4, bounce: 0.4 };

Why it matters, pros and cons

Why it matters

Overshoot drags the eye back to a finished menu. bounce: 0 never overshoots.

Pros

  • Never passes its target; edges stay put.
  • Still a spring: interruptions keep velocity.
  • Easy audit: any bounce > 0 on utility.

Cons

  • Celebrations and kids apps earn some bounce.
  • 0.1 is the ceiling on large surfaces.
  • Springs need JS or a linear() approximation.