Gesture-Driven Animations with use-gesture
Combine react-spring with @use-gesture/react to build drag, pinch, and scroll-driven animations.
@use-gesture/react Overview
@use-gesture/react is a gesture recognition library designed to work seamlessly with react-spring. It recognizes drag, pinch, scroll, hover, move, and wheel gestures, providing normalized gesture state that you pipe directly into spring setters for fluid, physics-based interactions.
useDrag Gesture State
The useDrag hook fires a callback on every drag event. The callback receives a gesture state object with key properties: movement (total displacement from drag start), velocity (current speed), direction (1 or -1 per axis), first (true on drag start), last (true on drag end), and event (the raw DOM event).
All lessons in this course
- React Spring Core: useSpring Hook
- Animated Components and Style Interpolation
- useTrail and useChain for Sequences
- Gesture-Driven Animations with use-gesture