Manually start/stop dragging on a motion component.

Usually, dragging is initiated by pressing down on a motion component with a drag prop and then moving the pointer.

For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we might want to initiate that dragging from a different component than the draggable one.

With useDragControls, we can create a set of controls to manually start dragging from any pointer event.

Usage

Import useDragControls from Framer Motion.

import { motion, useDragControls } from "framer-motion"

Create controls by calling the hook, and then pass these to a draggable motion component.

function Component() {
  const controls = useDragControls()
  
  return (
    <>
      <div />
      <motion.div drag="x" dragControls={controls} />
    </>
  ) 
}

Now we can start a drag session from another any element's onPointerDown event via the start method.

const controls = useDragControls()

function startDrag(event) {
  controls.start(event)
}

return (
  <>
    <div onPointerDown={startDrag} />
    <motion.div drag="x" dragControls={controls} />
  </>
)

Touch support

To support touch screens, the triggering element should have the touch-action: none style applied.

<div onPointerDown={startDrag} style={{ touchAction: "none" }} />

Snap to cursor

By default, the manual drag gesture will only apply changes in the pointer to the motion component.

We can also make the motion component immediately snap to the cursor by passing snapToCursor: true to the start method.

controls.start(event, { snapToCursor: true })

Blocking automatic drag

With this configuration, the motion component will still automatically start a drag gesture when it receives a pointerdown event itself.

We can stop this behaviour by passing it a dragListener={false} prop.

<motion.div
  drag
  dragListener={false}
  dragControls={controls}
/>