Spring animation doesn’t work like cubic-bezier. Instead of a fixed curve with a set duration, a spring is a physical system: it settles when velocity approaches 0. Understanding this system’s three parameters lets you design motion from first principles instead of copying presets.

For an introduction to springs, see Ease vs Spring.

The spring equation

F = -k·x - d·v

• k = stiffness: the force pulling toward the equilibrium point
• d = damping: the resisting force (friction)
• x = displacement: distance from the equilibrium point
• v = velocity: the current velocity

Each frame, the system computes the force F, updates velocity, and updates position. The animation ends when |x| < threshold && |v| < threshold.

The three parameters

Stiffness (spring stiffness)

Stiffness determines how strongly the spring pulls toward the target. High stiffness = a stiff spring = a fast, crisp animation. Low stiffness = a soft spring = a slow, lazy animation.

Stiffness	Feel	Use for
50–100	Lazy, slow	Content cards, long reveals
200–300	Standard, balanced	Most UI elements
400–600	Snappy, crisp	Micro-interactions, tooltips
800+	Very stiff	Near-instant with slight bounce

Damping

Damping determines whether the spring settles quickly or bounces a lot. Low damping = lots of bounce (underdamped). High damping = no bounce, slow settle (overdamped). The midpoint = critically damped (the fastest settle with no bounce).

Critical damping = 2 × √(stiffness × mass)

State	Damping / Critical	Behavior
Underdamped	< 1	Overshoot, oscillate, then settle
Critically damped	= 1	Fastest settle, no overshoot
Overdamped	> 1	No overshoot, settles slower than critical

In Framer Motion, a damping value around 10–15 gives a slight underdamp (natural bounce), and 20–30 gives critical damping.

Mass

Mass determines inertia — how heavy the object is. High mass = slow to start, late to stop. Low mass = instant response.

Mass is usually left at its default (= 1), and you tune stiffness + damping to reach the feel you want. Mass is most useful when you want something to feel “heavy” or “light” without changing the bounce amount.

Common combinations

Gentle bounce — toggle thumb, like button:

{ stiffness: 260, damping: 20, mass: 1 }

Snappy, no bounce — tooltip, dropdown:

{ stiffness: 400, damping: 30, mass: 1 }

Heavy, slow settle — modal, bottom sheet:

{ stiffness: 200, damping: 25, mass: 1.2 }

Playful — notification popup, celebration:

{ stiffness: 180, damping: 12, mass: 1 }

CSS vs JavaScript springs

CSS only has cubic-bezier — no true spring. A spring is faked using a control point with y > 1:

/* Faked spring — fixed duration */
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

Limitation: a CSS spring always has a fixed duration. If the element is interrupted midway, the animation “jumps” instead of preserving velocity.

JavaScript (Framer Motion, React Spring, GSAP) uses real physics:

// Framer Motion
animate(element, { x: 100 }, {
  type: 'spring',
  stiffness: 260,
  damping: 20
})

// React Spring
useSpring({ x: 100, config: { stiffness: 260, damping: 20 } })

A JS spring can be interrupted and resumed with velocity preserved — drag and release midway, and it continues from the current velocity instead of restarting.

Velocity-based springs

The greatest strength of a true spring: velocity propagation. When a user swipes a card, the spring takes the velocity from the gesture and continues with that momentum. This is why iOS scrolling feels natural — it’s a spring that takes its velocity from the finger’s velocity.

const gesture = useGesture({
  onDrag: ({ velocity, offset }) => {
    api.start({
      x: offset[0],
      config: { velocity: velocity[0], tension: 200, friction: 30 }
    })
  }
})

When to use a spring instead of a bezier

Use a spring when: the element responds to direct interaction (drag, press, swipe), or when you need a “physical” feel (toggle, like button, notification).

Use a bezier when: the animation is independent of interaction (page transition, skeleton fade, scroll reveal), or when you need precise timing to sync with audio/video.

Further reading: Cubic Bezier in Depth, Gesture Feedback Motion, Modal & Sheet Animation.