← all topics

Gesture & Drag

Framer Motion

Drag the cards around. Elastic controls how much the cards can be pulled past their constraints. With snap-back off, cards settle where you drop them.

A
B
C
D
drag the cards
Controls
0.3

concepts

drag prop

Framer Motion tracks pointer events, calculates velocity, and updates a MotionValue each frame — no React re-renders required during the drag.

dragConstraints

A ref to a container element. The draggable can't be moved outside its bounding box. When released, elastic controls whether it snaps back.

dragElastic

How far past the constraints the element can be pulled — 0 is a rigid wall, 1 is a fully elastic rubber band that stretches freely.

dragMomentum

When true, the element continues moving after release and decelerates naturally based on its velocity at the moment of release.

core pattern

<motion.div
  drag
  dragConstraints={containerRef}  // can't leave this box
  dragElastic={0.3}               // 30% stretch past the edge
  dragMomentum={true}             // coasts after release
  whileDrag={{ scale: 1.08 }}     // visual feedback while held
/>