Inertia animation

The glide after you let go: release speed carries the object forward, then friction gradually brings it to rest.

keep moving after I let gomake the card glide after a swipethrow it and let it slow downit keeps sliding after my finger leavesflick motionmomentum animationslides on like the iphone home screeninerta animation

See it

Live demo coming soon

What it is

Inertia animation takes the velocity at the instant a drag or swipe ends and keeps the object moving, then reduces that velocity through simulated friction. A faster release travels farther; a slow release settles nearby. That continuity is what makes the object feel thrown instead of merely told where to go. The original iPhone demo in 2007 sold the whole idea in one gesture: flick the contact list and it keeps going.

Reach for it in draggable carousels, maps, canvases, dismissible cards, and any direct-manipulation surface where the user's hand already supplied direction and speed. Exponential decay is a common model because it sheds a constant fraction of velocity over time and comes naturally to rest. GSAP's InertiaPlugin packages the same math, including snapping the projected landing point to the nearest slide.

Gotcha: the velocity estimate matters more than a fancy easing curve. A single noisy pointer sample can launch the object in the wrong direction, so estimate from several recent samples and cap extreme values. Inertia also needs a boundary rule: clamp at the edge, bounce, or hand off to a spring. Letting it drift through unavailable content is not a physical effect; it is a broken constraint.

Ask AI for it

Add inertia after this Pointer Events drag. Keep the last 80ms of pointer positions, estimate release velocity from those samples, cap it at 2400 pixels per second, and continue in requestAnimationFrame with exponential decay 'v = v0 * exp(-k * t)' at k = 5 per second. Update position from the decaying velocity until speed falls below 8 pixels per second. Clamp the object to its container and hand boundary overshoot to a damped spring instead of letting it pass through the edge. Cancel the inertia immediately if a new pointerdown begins.

You might have meant

inertial scrollingspring animationinterruptible animationeasing functionovershoot anticipation