Framer Motion Gestures

Framer Motion Gestures

When to Use This Skill

Apply when implementing gesture-driven animations: drag, pan, tap, hover, focus, or touch interactions. When the user asks about drag-and-drop, interactive elements, or gesture-based UI in Framer Motion.

Related skills: For core animation use framer-motion-core; for variants use framer-motion-variants; for layout animations use framer-motion-layout.

Drag

Enable dragging with the drag prop:

Drag Props

| Prop | Type | Description | |------|------|-------------| | drag | bool \| "x" \| "y" | Enable drag on axis | | dragConstraints | object \| RefObject | Movement constraints | | dragMomentum | boolean | Continue momentum after release (default: true) | | dragElastic | number \| object | Elasticity of bounds (default: 0) | | dragTransition | Transition | Spring config for momentum | | whileDrag | MotionProps | Animation while dragging | | onDrag | function | Callback during drag | | onDragStart | function | Callback when drag starts | | onDragEnd | function | Callback when drag ends |

Drag Constraints

Ref-based Constraints

function Draggable() {
  const constraintsRef = useRef(null);

  return (
    <>
      
      
    
  );
}

Pan

Pan is similar to drag but for pointer/touch:

 {
    console.log("Position:", info.point);
    console.log("Velocity:", info.velocity);
  }}
/>

Pan vs Drag

• Drag: Mouse/touch with visual feedback, momentum, and constraints
• Pan: Lower-level pointer tracking without momentum

Tap (whileTap)

Animation when pressed:

  Click me

Hover (whileHover)

Animation on hover:

onHoverStart / onHoverEnd

 console.log("Hover started")}
  onHoverEnd={() => console.log("Hover ended")}
/>

Focus (whileFocus)

Animation when focused (keyboard):

Drag with Spring Physics

Drag Controls with Constraints

function DraggableBox() {
  const constraintsRef = useRef(null);

  return (
    <>
      
      {[1, 2, 3].map(i => (
        
      ))}
    
  );
}

Swipe Detection

function Swipeable() {
  const x = useMotionValue(0);
  const { scrollYProgress } = useScroll();

  const opacity = useTransform(x, [-100, 0, 100], [0, 1, 0]);

  return (
    
  );
}

Gesture State Info

Callbacks receive PointInfo and DragInfo:

onDrag={(e, info) => {
  info.point      // { x, y } position
  info.velocity   // { x, y } velocity
  info.offset     // { x, y } offset from start
}}

Best practices

• ✅ Use dragConstraints to keep elements within bounds.
• ✅ Use dragElastic for bounce-back effects.
• ✅ Use whileDrag for visual feedback during drag.
• ✅ Use dragMomentum for natural continuation.
• ✅ Use dragTransition with spring for physics-based drag.
• ✅ Use refs for constraints when dragging within a container.

Do Not

• ❌ Use drag without dragConstraints if the element should stay within bounds.
• ❌ Forget that drag events only fire after the pointer moves a threshold.
• ❌ Use excessive dragElastic — it can cause visual glitches.
• ❌ Animate conflicting properties during drag (e.g., scale and x).

Learn More

https://www.framer.com/motion/gestures/ https://www.framer.com/motion/drag/

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: C-Jeril
• Source: C-Jeril/framer-motion-skills
• License: MIT
• Homepage: https://kuakua.app

Install and usage instructions live in the source repository linked above.