Damping
Also called friction or spring damping
A spring setting that works like friction, deciding whether motion bounces and wobbles on arrival or settles smoothly without overshooting.
import { useState } from 'react';
import { motion, useReducedMotion } from 'motion/react';
const STIFFNESS = 400;
// Low damping lets the button overshoot and wobble after a press.
// Critical damping, 2 × √(stiffness × mass) = 40, would settle with no overshoot.
const DAMPING = 12;
export function StarButton({ stars }: { stars: number }) {
const [starred, setStarred] = useState(false);
const reduceMotion = useReducedMotion();
return (
<motion.button
type='button'
aria-pressed={starred}
onClick={() => setStarred(!starred)}
whileTap={reduceMotion ? undefined : { scale: 0.85 }}
transition={{ type: 'spring', stiffness: STIFFNESS, damping: DAMPING }}
className='inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-medium hover:bg-muted aria-pressed:text-amber-500'
>
<span aria-hidden>★</span>
{starred ? 'Starred' : 'Star'}
<span className='text-muted-foreground tabular-nums'>
{stars + (starred ? 1 : 0)}
</span>
</motion.button>
);
}Animate the notification badge with a spring of stiffness 400 and damping 12 so it pops in with a playful bounce, and give the sidebar stiffness 300 and damping 35 so it settles without overshooting. Make both instant when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Damping?
Damping is the resistance that drains energy from a spring. With little damping, the element overshoots its target and wobbles back and forth before it stops. With more, it glides in and settles. Set it to 0 in Motion and the spring oscillates forever.
Between the two is critical damping, where the spring reaches its target as fast as possible without overshooting. It works out to 2 × √(stiffness × mass), so about 35 for a stiffness of 300. Most interface motion sits at or a little below it, which feels lively while staying calm.
Too much damping makes motion sluggish, because the element creeps toward the end. Damping is relative to stiffness and mass, so recheck it when you change either one. React Spring calls this setting friction.
Often confused with
- Bounce
- Bounce is a single 0 to 1 setting for duration-based springs. Damping is the raw physics value, and its effect depends on stiffness and mass.
Related terms
All termsSpring animation
An animation driven by simulated spring physics in place of a fixed duration and curve, so motion can overshoot, settle, and react naturally.
Stiffness
A spring setting for how hard the spring pulls toward its target, where higher values feel fast and snappy and lower values feel loose and slow.
Bounce
A spring setting from 0 to 1 for how much an element overshoots and wobbles, used with a duration in place of stiffness and damping.
Follow-through
When the main object stops but loose, attached parts keep moving for a moment, swing past, and settle, which makes motion feel physical.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.