gsap-draggable

Register the Draggable plugin with gsap.registerPlugin(Draggable), then call Draggable.create('.box', { type: 'x,y', bounds: '.container' }). The type option controls the axis, and bounds constrains movement to a container or coordinate range.

Register both Draggable and InertiaPlugin, then set inertia: true in the config. You can tune the throw with resistance, minDuration, maxDuration, and edgeResistance options to control how the element glides and stops.

Inertia fails when InertiaPlugin is not registered alongside Draggable. Call gsap.registerPlugin(Draggable, InertiaPlugin) before creating the instance, and confirm inertia: true is set in the configuration.

Bounds require the container to have CSS positioning, typically position: relative on the container and position: absolute on the dragged element. Without positioning, the bounds calculation has no reference frame and dragging appears unconstrained.

Use the liveSnap option with a number for fixed intervals, an array of snap points, or a function returning the snapped value. For example, liveSnap: { x: 20, y: 20 } snaps movement to a 20-pixel grid during the drag.

Use type: 'x,y' because it applies GPU-accelerated transforms and avoids layout thrashing. The left,top type modifies layout properties directly, which triggers reflows and performs worse, especially during continuous dragging.