Spring animation in CSS with the linear() easing function

Why a bezier can never bounce

Every easing function CSS shipped with is a cubic bezier, and a cubic bezier cannot overshoot. Its curve is bounded by its control points, so the value it produces can approach 1 quickly or slowly, but it cannot pass 1 and come back. No amount of tuning cubic-bezier() will give you a spring, because the shape you want is not in the family of shapes it can draw.

That is why springs have meant a library. Framer Motion, React Spring and the rest run a physics simulation on the main thread, stepping the value every frame and writing it to the element.

linear() removes the reason to. It takes a list of points and draws straight lines between them, and those points are under no obligation to stay below 1. Give it enough of them and the straight lines are indistinguishable from a curve, including the part where the curve goes past its target and settles back.

The spring is one equation, not a simulation

You do not need to step through anything. A damped harmonic oscillator has a closed-form solution, so the position at any time t is a single expression:

const w0 = Math.sqrt(stiffness / mass);
const zeta = damping / (2 * Math.sqrt(stiffness * mass));
const wd = w0 * Math.sqrt(1 - zeta * zeta);
 
const pos = (t) =>
  1 - Math.exp(-zeta * w0 * t) * (Math.cos(wd * t) + (zeta * w0 / wd) * Math.sin(wd * t));

The number that matters is zeta, the damping ratio. Below 1 the spring overshoots and oscillates. At exactly 1 it arrives as fast as possible without overshooting. Above 1 it crawls in slowly and feels dead.

This drawer uses stiffness 260, damping 24, mass 1, which is a zeta of 0.74: one clear overshoot of about 3 percent, then settled. Softer than that and a drawer starts to feel like jelly. I tried 0.67, which overshoots 5.6 percent and takes 652ms, and it was noticeably too much for a panel this size.

Where the duration comes from

You do not choose the duration. The spring has one, and using a different number means the animation is cut off mid-motion or sits still at the end.

Find it by sampling forward until the value stays inside a tolerance and does not leave again:

let dur = 0;
for (let t = 0; t < 5; t += 0.001) {
  let settled = true;
  for (let u = t; u < t + 0.25; u += 0.01) {
    if (Math.abs(pos(u) - 1) > 0.002) { settled = false; break; }
  }
  if (settled) { dur = t; break; }
}

The inner loop is the part worth keeping. A spring crosses its target several times, so checking a single instant will report it settled at the first crossing, while it still has visible travel left. You have to check that it stays settled.

For these parameters: 477 milliseconds.

Sampling into stops

Take 23 evenly spaced samples and you have the arguments:

transition: translate 477ms linear(
  0, 0.0513, 0.1712, 0.3207, 0.4736, 0.6141, 0.734, 0.8304, 0.9037, 0.9563,
  0.9917, 1.0135, 1.0252, 1.0298, 1.0297, 1.0268, 1.0226, 1.018, 1.0135,
  1.0096, 1.0063, 1.0038, 1.002
);

The values above 1 are the overshoot. You can read the whole motion in the numbers: climb, pass the target at stop 12, peak at 1.0298, settle back.

More stops track the curve more closely. Past about 30 the difference stops being visible and you are only making the stylesheet longer. Fewer than about 15 and the straight lines start to show as a faint stepping in the overshoot, where the curve changes direction fastest.

What you get for it

The maths runs once, at authoring time. What ships is a list of numbers.

That means no library in the bundle, no physics loop on the main thread, and an animation that runs on the compositor like any other CSS transition. It is interruptible in the normal way: click the toggle mid-open and it reverses from where it is, no state to reconcile. And it inherits the platform's behaviour for free, including being disabled by the site's reduced-motion rule without the component knowing anything about it.

The trade is that the curve is fixed at build time. A spring library can respond to the velocity of a drag, starting the animation from however fast your finger was moving. linear() cannot: it is a static curve. For a drag-to-dismiss sheet, the library is still the right answer. For a drawer that opens when you press a button, which is almost every drawer, this is the whole feature at none of the cost.

The bit that is not the animation

Closed, the panel is off to the side but still in the layout, which means its contents are still focusable and still announced. A drawer whose links you can Tab into while it is invisible is a genuinely disorienting thing to encounter.

inert is the fix, and React takes it as a boolean:

<aside inert={!open}>

That removes the whole subtree from the tab order and the accessibility tree while leaving it painted and animatable. The alternative, visibility: hidden, would also work but cannot be transitioned smoothly without transition-behavior: allow-discrete, and inert says what is actually meant.