Draggable Throw Notes — Free GSAP Inertia Snippet

Plain HTML5 drag feels dead: the element stops the instant your pointer does. These sticky notes feel alive — grab one, flick it, and it keeps traveling with realistic momentum before gliding to a stop, always inside the corkboard. That's GSAP's Draggable paired with InertiaPlugin (both free on the CDN since GSAP 3.13), which together replace an entire physics-and-input layer with one Draggable.create() call.

inertia: true is where the physics lives

Draggable continuously tracks pointer velocity while you drag. On release, inertia: true hands that velocity to InertiaPlugin, which computes a natural deceleration curve — how far the note *would* slide given friction — and tweens it there. Crucially, the plugin solves the end position *first*: it knows the note's destination the moment you let go, which is why it can guarantee the landing spot respects bounds instead of clamping mid-flight with an ugly wall-stop.

bounds turns the board into a container, not a cage wall

bounds: '#dtnBoard' constrains both dragging and thrown travel to the board's box. During an over-drag past the edge, edgeResistance: 0.72 makes the note move only ~28% of your pointer's distance — the rubbery tension every native app uses to say "you've hit the edge" — and on release it settles back inside. A thrown note aimed at the edge decelerates to land exactly at the boundary, because InertiaPlugin factored the bounds into its end-point solve.

Grab feedback is choreography, not physics

onPress bumps the note's z-index above its siblings (an incrementing counter, so the most recently touched note always wins) and animates a 1.06 scale with rotation zeroed — the note "lifts off the board" and squares up in your hand. onRelease settles it back down with a fresh random(-4, 4) rotation, so every throw leaves the board looking naturally messy rather than snapping notes back to fixed angles. GSAP's string-based random() makes that one line.

touch-action: none is the mobile linchpin

Each note sets touch-action: none so mobile browsers hand the touch to Draggable instead of scrolling the page — without it, vertical flicks would scroll instead of throw. Draggable normalizes mouse, touch, and pointer events internally, so the one config works everywhere, including the user-select: none needed to stop text selection during fast drags.

Transforms only, so throws stay smooth

Draggable moves elements via x/y transforms (not left/top), so dragging and inertia glides are compositor work. The CSS positions notes initially with left/top percentages purely for layout convenience; Draggable layers transforms on top from then on.

Where you'd take it further

Real boards persist positions (write this.x / this.y to storage in onThrowComplete), add snap to align notes to a grid, or set throwResistance to tune how far flicks travel. For rotation-based dragging, see the drag spin dial; for pointer-ordered lists, drag sort list; for scroll-driven momentum instead, drag scroll row; and for resizable workspaces, drag resize panels.