Beta Status

This library is still in early beta and the API is subject to change and may get daily breaking changes. If the docs and the package disagree, prefer the package and open an issue on GitHub or send a pull request with a fix.

Drag

drag gives a motion component pointer-driven movement with constraints, momentum, and drag callbacks.

Props

drag: boolean | "x" | "y". Enables free drag or axis-locked drag.
whileDrag: target object | variant label | string[]
dragConstraints: false | Partial<{ top: number; right: number; bottom: number; left: number }> | Element
dragElastic: boolean | number | Partial<{ top: number; right: number; bottom: number; left: number }>
dragMomentum: boolean
dragDirectionLock: boolean
dragPropagation: boolean
dragSnapToOrigin: boolean
dragTransition: Transition
dragControls: DragControls
dragListener: boolean

Callbacks And Helper

onDragStart: (event, info) => void
onDrag: (event, info) => void
onDragEnd: (event, info) => void
onDirectionLock: (axis) => void
onDragTransitionEnd: () => void
createDragControls(): returns { start, cancel, stop }
start(event, options?): options are { snapToCursor?: boolean; distanceThreshold?: number }

Notes

Drag info includes point, delta, offset, and velocity.
Set touch-action: none on draggable surfaces when the browser would otherwise scroll or zoom.

Example

<motion.div
  drag="x"
  dragConstraints={{ left: -120, right: 120 }}
  whileDrag={{ scale: 1.08 }}
/>

Drag