Spring Physics in Framer Motion

Most satisfying UI animation is spring-based, not time-based. A spring models a physical system: pull an element, let go, and it oscillates to rest. Learning to tune stiffness, damping, and mass gives you predictable, natural motion — no easing curves to guess at.

The three knobs

transition={{
  type: "spring",
  stiffness: 300,
  damping: 30,
  mass: 1,
}}

Stiffness controls how strongly the spring pulls the element back to rest.

• Low stiffness (e.g. 80) — slow, floaty return.
• High stiffness (e.g. 500) — snappy, almost instant.

Damping controls how much the spring resists motion.

• Low damping (e.g. 8) — visible overshoot and bounce.
• High damping (e.g. 40) — no bounce, a clean stop.

The relationship between the two decides whether a spring oscillates at all.

Defaults you should almost never need to change

Framer Motion provides sensible presets:

transition={{ type: "spring", stiffness: 260, damping: 20 }}

For modals and tooltips use damping: 25 — a touch more friction means the element settles on open instead of wobbling over the content behind it.

Practical recipes

• Tooltip pop — stiffness: 400, damping: 25. Small element, small travel, needs to arrive instantly.
• Card hover lift — stiffness: 300, damping: 30. Fast arrival with a hint of life, no bounciness.
• Drawer/modal — lower stiffness stays elegant: stiffness: 200, damping: 25.

Friction between springs

When several elements animate in sequence, add a small per-item delay (e.g. index * 0.03) so they stagger. Springs can be delayed, but keep delays tiny — a delayed spring feels like a queue, not a ripple.

Remember

• Bigger mass = slower response. Leave it at 1 until an element needs extra "weight".
• If a spring wobbles too much, raise damping before lowering stiffness.
• Spring timing derives from physics, so it resizes gracefully across framerates — a key reason to prefer it over duration for micro-interactions.