Follow-Through

When a coat-tail keeps moving after the body stops, that is follow-through. The primary action ends; a secondary one settles. In UI the secondary is usually a soft overshoot — the drawer goes a few pixels past its rest, then eases back.

Open both panels.

The left drawer stops exactly on its target. Correct by the numbers, dead by feel. The right one uses a spring with light damping: it overshoots, then settles. That settle is the follow-through.

Do not bounce the whole UI

Overshoot works on things that arrive: sheets, toasts, list inserts. It fails on things that track: scrubbers, cursor-following handles, anything the user is still dragging. If the finger is down, the motion belongs to them — do not add a flourish on top.

Keep the overshoot small. A few pixels, or a spring with damping around 18 and stiffness around 380, is plenty. Past that it becomes a rubber-band effect people notice instead of feel.

Usage

import { motion } from "motion/react";

<motion.div
    animate={{ y: open ? 0 : "110%" }}
    transition={{
        type: "spring",
        stiffness: 380,
        damping: 18,
        mass: 0.85,
    }}
/>

/* Overshoot past 1.0, then settle */
.drawer {
    transition: transform 480ms cubic-bezier(0.22, 1.4, 0.36, 1);
}

.drawer[data-open="false"] {
    transform: translateY(110%);
}

.drawer[data-open="true"] {
    transform: translateY(0);
}

A cubic-bezier whose Y values go above 1 creates overshoot in pure CSS. Springs are easier to tune by feel; pick whichever your stack already uses.