← all topics

Spring Physics

Framer Motion

Click anywhere in the canvas to fling the ball. Tune stiffness (how strong the spring pulls back), damping (how quickly it loses energy), and mass (how heavy the object feels).

●
click to fling
Controls
200
20
1

useSpring(x, {
stiffness: 200,
damping: 20,
mass: 1,
})

underdamped — oscillates

concepts

springs vs easing

Easing animations have a fixed duration. Springs don't — they settle when kinetic energy runs out, so a heavy spring takes longer than a light one even with the same stiffness.

stiffness

How hard the spring pulls back. High stiffness produces a snappy, responsive feel; low stiffness makes the element feel sluggish and slow to react.

damping

How quickly the spring loses energy. Low damping causes long oscillation; high damping means the element creeps slowly to rest without overshooting.

underdamped

When damping < 2 × √(stiffness × mass), the spring overshoots and bounces. The badge at the bottom of the panel tells you which regime the current settings are in.

core pattern

// Teleport ball to click position, then spring it back
ballX.set(clickX - centerX);
ballY.set(clickY - centerY);

animate(ballX, 0, {
  type: "spring",
  stiffness: 200,  // pull-back force
  damping: 20,     // energy loss per frame
  mass: 1,         // inertia — heavier = slower
});