Spring animation
Also called spring physics or physics-based animation
An animation driven by simulated spring physics in place of a fixed duration and curve, so motion can overshoot, settle, and react naturally.
import { Popover } from '@base-ui/react/popover';
import { motion, useReducedMotion, type HTMLMotionProps } from 'motion/react';
// No duration: the spring's physics decide how long it takes to settle.
const SPRING = { type: 'spring', stiffness: 300, damping: 30 } as const;
export function SettingsPopover() {
const reduceMotion = useReducedMotion();
const closed = reduceMotion
? { opacity: 0 }
: { opacity: 0, y: -8, scale: 0.96 };
return (
<Popover.Root>
<Popover.Trigger className='rounded-md border px-3 py-2 text-sm font-medium hover:bg-muted'>
Settings
</Popover.Trigger>
<Popover.Portal keepMounted>
<Popover.Positioner sideOffset={8}>
<Popover.Popup
className='w-64 origin-(--transform-origin) rounded-xl border bg-background p-4 shadow-lg outline-none'
render={(props, state) => (
<motion.div
{...(props as HTMLMotionProps<'div'>)}
initial={false}
// Toggling mid-flight retargets the spring from its current
// position and speed, so it never jumps.
animate={state.open ? { opacity: 1, y: 0, scale: 1 } : closed}
transition={reduceMotion ? { duration: 0.15 } : SPRING}
/>
)}
>
<Popover.Title className='text-sm font-semibold'>
Editor
</Popover.Title>
<label className='mt-3 flex items-center justify-between text-sm'>
Compact mode
<input type='checkbox' className='size-4' />
</label>
<label className='mt-2 flex items-center justify-between text-sm'>
Line numbers
<input type='checkbox' defaultChecked className='size-4' />
</label>
</Popover.Popup>
</Popover.Positioner>
</Popover.Portal>
</Popover.Root>
);
}Animate the settings panel open and closed with a spring instead of a fixed duration: stiffness 300 and damping 30, so it settles quickly with almost no bounce. If it is interrupted mid-animation, continue from its current position and speed, and use a 150ms fade instead when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Spring animation?
A spring animation moves an element as if a spring were pulling it toward its target. Instead of a duration and an easing curve, you describe the spring: how stiff it is, how much friction slows it, and how heavy the object is. The element speeds up, may overshoot a little, and settles on its own.
Springs feel natural for anything that reacts to people: toggles, drawers, cards that follow a drag, and elements that change direction mid-flight. A spring starts from the element’s current position and speed, so it can pick up wherever an interrupted animation left off.
Motion (type: "spring"), React Spring, and SwiftUI have springs built in. CSS has no spring timing function, but the linear() easing function can approximate a spring’s curve. Keep the bounce subtle in product UI, and swap the movement for a quick fade for people who prefer reduced motion.
Often confused with
- Tweening
- A tween runs for a set duration along an easing curve. A spring has no fixed duration; its physics decide how long it takes to settle.
- Overshoot easing
- Overshoot easing fakes a single overshoot with a cubic-bezier curve and a fixed duration. A spring can wobble several times and responds to the speed it starts with.
Related terms
All termsStiffness
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.
Damping
A spring setting that works like friction, deciding whether motion bounces and wobbles on arrival or settles smoothly without overshooting.
Interruptible animation
An animation that can change course mid-flight, continuing smoothly from its current position and speed when someone acts again before it ends.
Easing
A curve that controls how an animation’s speed changes over time, so motion can start slow, land softly, or keep one steady pace.
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.