Velocity
Also called initial velocity or release velocity
The speed and direction an element already has when an animation starts, which a spring carries forward so a flick flows into what follows.
import {
animate,
motion,
useMotionValue,
useReducedMotion
} from 'motion/react';
const SPRING = { type: 'spring', stiffness: 300, damping: 25 } as const;
export function FlickCard() {
const x = useMotionValue(0);
const reduceMotion = useReducedMotion();
return (
<motion.div
drag='x'
dragMomentum={false}
style={{ x }}
onDragEnd={(_event, info) => {
if (reduceMotion) {
animate(x, 0, { duration: 0.15 });
return;
}
// Start the spring at the release speed (px/s), so a quick flick
// swings past the slot before curving back.
animate(x, 0, { ...SPRING, velocity: info.velocity.x });
}}
className='w-72 cursor-grab touch-pan-y rounded-2xl border bg-background p-5 shadow-sm active:cursor-grabbing'
>
<p className='font-medium'>Review the launch checklist</p>
<p className='mt-1 text-sm text-muted-foreground'>Due Friday</p>
</motion.div>
);
}When a dragged card is released, spring it back to its slot (stiffness 300, damping 25) starting from the drag’s release velocity, so a quick flick swings past the slot before settling. Support both mouse and touch, and snap straight back without the swing when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
Velocity explained
Velocity is how fast something is moving, and in which direction. When a person drags a card and lets go, the card is still moving. A spring animation can start with that velocity, so the card keeps traveling for a moment and then curves back toward its target the way a real object would.
When the velocity is dropped, the card stops dead at the moment of release and starts again from rest, which feels disconnected from the gesture. Passing velocity along is what makes flicks, swipes, and throws feel physical.
Motion’s drag gesture hands its release velocity to the glide that follows automatically, and you can pass velocity to a spring yourself in pixels per second. Physics springs (stiffness and damping) use it. Motion’s duration-based springs (visualDuration and bounce) start from rest, so use physics values when the hand-off matters.
Often confused with
- Momentum
- Momentum is the glide after a throw that slows to a stop wherever it lands. Velocity is the starting speed that momentum and springs both use.
Related terms
All termsMomentum
The glide an element keeps after a throw or flick, slowing down gradually like an object sliding across a smooth table.
Spring animation
An animation driven by simulated spring physics in place of a fixed duration and curve, so motion can overshoot, settle, and react naturally.
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.
Drag gesture
Moving an element by pressing on it and sliding the pointer or finger, usually within set bounds and with a glide after release.
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.