Optional _dragXOptional _dragYUsually, dragging uses the layout project engine, and applies transforms to the underlying VisualElement. Passing MotionValues as _dragX and _dragY instead applies drag updates to these motion values. This allows you to manually control how updates from a drag gesture on an element is applied.
Optional dragEnable dragging for this element. Set to false by default.
Set true to drag in both directions.
Set "x" or "y" to only drag in a specific direction.
<motion.div drag="x" />
Optional dragApplies constraints on the permitted draggable area.
It can accept an object of optional top, left, right, and bottom values, measured in pixels.
This will define a distance the named edge of the draggable component.
Alternatively, it can accept a ref to another component created with React's useRef hook.
This ref should be passed both to the draggable component's dragConstraints prop, and the ref
of the component you want to use as constraints.
// In pixels
<motion.div
drag="x"
dragConstraints={{ left: 0, right: 300 }}
/>
// As a ref to another component
const MyComponent = () => {
const constraintsRef = useRef(null)
return (
<motion.div ref={constraintsRef}>
<motion.div drag dragConstraints={constraintsRef} />
</motion.div>
)
}
Optional dragUsually, dragging is initiated by pressing down on a component and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we might want to initiate dragging from a different component than the draggable one.
By creating a dragControls using the useDragControls hook, we can pass this into
the draggable component's dragControls prop. It exposes a start method
that can start dragging from pointer events on other components.
const dragControls = useDragControls()
function startDrag(event) {
dragControls.start(event, { snapToCursor: true })
}
return (
<>
<div onPointerDown={startDrag} />
<motion.div drag="x" dragControls={dragControls} />
</>
)
Optional dragIf true, this will lock dragging to the initially-detected direction. Defaults to false.
<motion.div drag dragDirectionLock />
Optional dragThe degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.
Set to 0.5 by default. Can also be set as false to disable movement.
By passing an object of top/right/bottom/left, individual values can be set
per constraint. Any missing values will be set to 0.
<motion.div
drag
dragConstraints={{ left: 0, right: 300 }}
dragElastic={0.2}
/>
Optional dragBy default, if drag is defined on a component then an event listener will be attached
to automatically initiate dragging when a user presses down on it.
By setting dragListener to false, this event listener will not be created.
const dragControls = useDragControls()
function startDrag(event) {
dragControls.start(event, { snapToCursor: true })
}
return (
<>
<div onPointerDown={startDrag} />
<motion.div
drag="x"
dragControls={dragControls}
dragListener={false}
/>
</>
)
Optional dragApply momentum from the pan gesture to the component when dragging
finishes. Set to true by default.
<motion.div
drag
dragConstraints={{ left: 0, right: 300 }}
dragMomentum={false}
/>
Optional dragAllows drag gesture propagation to child components. Set to false by
default.
<motion.div drag="x" dragPropagation />
Optional dragIf true, element will snap back to its origin when dragging ends.
Enabling this is the equivalent of setting all dragConstraints axes to 0
with dragElastic={1}, but when used together dragConstraints can define
a wider draggable area and dragSnapToOrigin will ensure the element
animates back to its origin on release.
Optional dragAllows you to change dragging inertia parameters.
When releasing a draggable Frame, an animation with type inertia starts. The animation is based on your dragging velocity. This property allows you to customize it.
See Inertia for all properties you can use.
<motion.div
drag
dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}
/>
Optional onIf dragConstraints is set to a React ref, this callback will call with the measured drag constraints.
If dragConstraints is set to a React ref, this callback will call with the measured drag constraints.
Optional whileProperties or variant label to animate to while the drag gesture is recognised.
<motion.div whileDrag={{ scale: 1.2 }} />
Optional onOptional onCallback function that fires when the component is dragged.
<motion.div
drag
onDrag={
(event, info) => console.log(info.point.x, info.point.y)
}
/>
Optional onCallback function that fires when dragging ends.
<motion.div
drag
onDragEnd={
(event, info) => console.log(info.point.x, info.point.y)
}
/>
Optional onCallback function that fires when dragging starts.
<motion.div
drag
onDragStart={
(event, info) => console.log(info.point.x, info.point.y)
}
/>
Optional onGenerated using TypeDoc
Usually, dragging uses the layout project engine, and applies transforms to the underlying VisualElement. Passing MotionValues as _dragX and _dragY instead applies drag updates to these motion values. This allows you to manually control how updates from a drag gesture on an element is applied.