---
name: Damping
slug: damping
category: motion
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: The friction term in a spring that decides how quickly oscillation
  dies out, from a loose wobble to a critically damped move with no bounce at
  all.
aliases:
  - name: damping ratio
    source: community
  - name: friction
    source: react-spring
  - name: critically damped
    source: community
  - name: bounce parameter
    source: framer-motion
tags: []
relations:
  contrastWith:
    - overshoot
  variantOf: []
  partOf: []
  seeAlso:
    - perceptual-duration
implementations: []
sources:
  - title: Spring Animations in Pure CSS with linear()
    url: https://www.carmenansio.com/articles/spring-physics-css/
demo: inline
exhibit: false
useWhen: tuning how much wobble a spring is allowed
---

Stiffness decides how hard a spring pulls. Damping decides how much of that
energy is thrown away as it goes, and so how the move ends. The number that
actually predicts the behaviour is not the damping value on its own but the
damping ratio, damping divided by twice the square root of stiffness times mass,
which is why the same damping value produces a wobble on one spring and a crawl
on another. [Spring animation](/spring-animation) is where the mechanism lives;
this is the one parameter of it worth arguing about.

There are three regimes and only three. Below a ratio of one the spring is
underdamped: it reaches the target with energy left over, carries past, and comes
back, each pass smaller than the last. That surplus is [overshoot](/overshoot),
and underdamping is the reason a spring has one at all. At exactly one it is
critically damped, which is the fastest possible arrival that never crosses the
target, and it is the setting to reach for whenever crossing would be a lie:
anything that changes layout, anything carrying text, any value a reader is
trying to read. Above one it is overdamped, and the extra friction buys nothing:
the move simply takes longer to finish, which reads as tired rather than as calm.

For interface work the useful range is narrow. Ratios around 0.7 to 0.8 give a
single small overshoot and a clean settle, which is what most people mean by
springy; below about 0.5 the wobble becomes the message and the element looks
like it is made of rubber. The names differ by library, which is where most of
the confusion comes from: damping is called friction in some APIs, and the
perceptual wrappers invert it, so a bounce of zero is critically damped and a
higher bounce is a lower ratio. Read the documentation before porting numbers, and
compare the results by eye rather than by parameter.

CSS has no springs, so a damping value cannot be written in a stylesheet
directly. What ships instead is the finished curve, sampled into a
[linear() easing](/linear-easing) with enough stops to carry the wobble, which
means the ratio is decided at authoring time by a generator rather than tuned live
in the browser. Whatever the spelling, a reader who has asked for reduced motion
gets the settled position rather than a smaller bounce, and any wobble that would
move neighbouring content stays out of the layout entirely.