Advanced Playgrounds
Interactive example
Draggable (useAnimeDraggable)
Live controls
Core drag interaction
A live draggable target with position, progress, and velocity telemetry.
Basic Draggable
👆 Drag
Position: (0, 0)
Progress: (0.00, 0.00)
Velocity: (0.0, 0.0)
Drag configuration
Tune trigger behavior, constraints, resistance, speed, and cursor feedback.
Trigger (Drag Handle)
Only the ≡ handle area is draggable
≡Drag here
Card Content
Click here - no drag
Position: (0, 0)
Axis Constraints (x: false / y: false)
↔ X
↕ Y
X-only: (0, 0)Y-only: (0, 0)
Container Friction
Rubber-band effect when dragging past bounds
0.95Elastic
0.3Rigid
Elastic: (0, 0)|Rigid: (0, 0)
Drag Speed
How fast element follows cursor
🐢0.5x
🐕1x
🐆2x
Slow: (0, 0)|Normal: (0, 0)|Fast: (0, 0)
Drag Threshold
Distance before drag activates (click vs drag)
⚡threshold=0Immediate
📏threshold=3030px delay
Immediate: Idle|Threshold: Idle
Cursor Configuration
🖱️Custompointer→move
🚫No Changecursor=false
Release physics
Compare spring response, velocity, easing, and snap behavior after release.
Spring Physics (stiffness, damping, mass)
🏀Bouncy
🧈Smooth
🪨Heavy
Bouncy: stiff=200, damp=8|Smooth: stiff=100, damp=20|Heavy: stiff=40, mass=3
Velocity Settings
🚀3x Speed
🛑Max=200
📏Min=100
3x: v=0|Capped: v=0|Thresh: v=0
Release Easing
➡️out(3)
🎸elastic
🏀bounce
Try flicking each element to see the different easing effects!
Snap to Grid (50px)
🧲
Position: (0, 0)
Control and callbacks
Use imperative controls and inspect drag lifecycle events.
Control Methods
🎮
Position: (0, 0) | Status: ✅ Enabled
Callbacks
📡
Event Log:
Drag to see events...
Position: (0, 0)