Chapter 40: useDragControls

Core Idea

Manually start/stop drag gestures. Supports snap to cursor and more.

Key Concepts

• Touch support: To support touch screens
• Snap to cursor: By default
• Disable automatic drag: With this configuration
• Configure drag threshold: By default
• Manually stop and cancel: The drag gesture will automatically stop when the pointerup event is detected.
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

import { useDragControls } from "motion/react"

• What it demonstrates: Core usage pattern for useDragControls.

Key Takeaways

1. useDragControls supports Touch support.
2. useDragControls supports Snap to cursor.
3. useDragControls supports Disable automatic drag.

Connects To

• React gesture animations: related Motion doc page.
• React motion component: related Motion doc page.
• React drag animation guide: related Motion doc page.