Mass
Also called spring mass
A spring setting for how heavy the moving object is, where heavier objects start slower, swing further past the target, and settle later.
import {
animate,
motion,
useMotionValue,
useReducedMotion
} from 'motion/react';
// Mass 2 makes the card heavy: it starts slowly and carries more momentum.
// Damping 34 keeps the extra weight from bouncing. Small buttons keep mass 1.
const RETURN = {
type: 'spring',
stiffness: 200,
damping: 34,
mass: 2
} as const;
export function PhotoCard() {
const x = useMotionValue(0);
const y = useMotionValue(0);
const reduceMotion = useReducedMotion();
function returnToSlot() {
const transition = reduceMotion ? { duration: 0 } : RETURN;
animate(x, 0, transition);
animate(y, 0, transition);
}
return (
<motion.img
src='/photos/coastline.jpg'
alt='Coastline at sunset'
draggable={false}
drag
dragMomentum={false}
onDragEnd={returnToSlot}
style={{ x, y }}
className='w-64 cursor-grab touch-none rounded-2xl shadow-lg active:cursor-grabbing'
/>
);
}Give the dismissed photo card a heavy feel: spring it back to its slot with stiffness 200, damping 34, and mass 2 so it moves deliberately and lands without bouncing. Keep mass 1 for the small buttons around it so they stay quick.
Paste into Layerwise or any AI coding tool.
What is Mass?
Mass gives a spring animation weight. The spring pulls just as hard, but a heavier object takes longer to get moving and carries more momentum, so it overshoots further and wobbles for longer. A light object darts into place.
Motion’s default mass is 1, and most interfaces never change it, because stiffness and damping are easier to reason about. Reach for mass when something should feel physically heavy, such as a large panel or a dropped card, or to give items in a group slightly different weights.
Small changes go a long way. Raising mass slows the whole animation and adds wobble, so pair it with more damping if the extra bounce is unwanted.
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.
Damping
A spring setting that works like friction, deciding whether motion bounces and wobbles on arrival or settles smoothly without overshooting.
Momentum
The glide an element keeps after a throw or flick, slowing down gradually like an object sliding across a smooth table.
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.