Motion
Back to framer.com
DocumentationUtilities
useDragControls
Motion
Back to framer.com
Design and publish your first free site today.
Getting started
  • Introduction
  • Examples
Animation
  • Overview
  • Layout
  • Gestures
  • Scroll
  • Transition
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
Motion values
  • Overview
  • useMotionValueEvent
  • useMotionTemplate
  • useScroll
  • useSpring
  • useTime
  • useTransform
  • useVelocity
  • useWillChange
Utilities
  • animate
  • transform
  • useAnimationControls
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

useDragControls

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}
/>
PrevioususeAnimationFrameNextuseInView
On this page
  • Usage
  • Touch support
  • Snap to cursor
  • Blocking automatic drag

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement