Draggable Rotation Dial — Free GSAP Inertia Knob Snippet

Rotary knobs are the hardest common control to build by hand: you're converting pointer positions into angles around a center, handling the ±180° wraparound, clamping a sweep range, and — if you want it to feel physical — adding flick momentum with snap detents. GSAP's Draggable has a dedicated mode for all of it: type: 'rotation'. This snippet builds a 270° volume-style dial with inertia, 5% detents, a glowing marker, and a conic-gradient fill ring that doubles as the value display.

type: 'rotation' replaces the atan2 layer

In rotation mode, Draggable computes the angle between the pointer and the element's center each frame and applies the *delta* as rotation — including the wraparound bookkeeping where naive atan2 implementations jump 360° when crossing the negative x-axis. Your code never sees coordinates; it reads this.rotation, a clean accumulated angle, in onDrag.

bounds become a mechanical sweep

bounds: { minRotation: -135, maxRotation: 135 } gives the knob a 270° travel — the classic hi-fi volume sweep with a dead zone at the bottom. With edgeResistance: 0.9, over-rotating past an end barely moves the dial (10% follow-through), reproducing the feel of a knob hitting its end stops, and releases settle back inside the range.

inertia + snap = detents

inertia: true carries flick velocity into a glide, and the snap function quantizes the *solved end value*: InertiaPlugin computes where the throw would naturally stop, passes it to snap, and retargets the glide to Math.round(value / 13.5) × 13.5 — 5% steps across the 270° sweep. Because snapping happens at the destination-solving stage (not as a post-hoc correction), the dial decelerates *into* a detent in one continuous motion, exactly like a weighted encoder wheel.

One render() serves drag and throw

Both onDrag and onThrowUpdate call the same render(this.rotation), which maps the angle to 0–100 and writes two things: the tabular-numeral readout and a --fill custom property. Handling both callbacks matters — a flick keeps changing the value *after* release, and forgetting onThrowUpdate is the classic bug where the readout freezes while the knob keeps spinning.

The fill ring is a conic gradient driven by one variable

The shell's background is conic-gradient(from 225deg, indigo var(--fill), faint var(--fill)) — starting at the sweep's origin (225° = bottom-left) and hard-stopping at the current percentage. Updating one CSS custom property per frame repaints the arc; no SVG, no dash math, and an inset pseudo-element hollows the ring.

touch-action: none, again

As with every pointer-driven control, touch-action: none on the dial keeps mobile browsers from interpreting rotation gestures as scrolling — miss it and the knob works on desktop while silently failing on touch.

Customizing it

Change the detent size (one divisor), widen the sweep, or emit the value to a real input for form submission. Related controls: the vanilla-math rotary knob, linear cousins in range slider and brightness slider, x/y momentum in drag throw notes, and audio context in volume control.