# Framer Motion Gestures

> Official Framer Motion skill for gesture animations — drag, pan, tap, hover, focus, touch animations. Use when building interactive elements with drag, pan, tap, hover, or touch gestures, or when asking about Framer Motion drag constraints, gesture handlers, or interactive animations.

- **Type:** Skill
- **Install:** `agentstack add skill-c-jeril-framer-motion-skills-framer-motion-gestures`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [C-Jeril](https://agentstack.voostack.com/s/c-jeril)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [C-Jeril](https://github.com/C-Jeril)
- **Source:** https://github.com/C-Jeril/framer-motion-skills/tree/main/skills/framer-motion-gestures
- **Website:** https://kuakua.app

## Install

```sh
agentstack add skill-c-jeril-framer-motion-skills-framer-motion-gestures
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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:

```jsx

```

### 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

```jsx

```

### Ref-based Constraints

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

  return (
    <>
      
      
    
  );
}
```

## Pan

Pan is similar to drag but for pointer/touch:

```jsx
 {
    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:

```jsx

  Click me

```

## Hover (whileHover)

Animation on hover:

```jsx

```

### onHoverStart / onHoverEnd

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

## Focus (whileFocus)

Animation when focused (keyboard):

```jsx

```

## Drag with Spring Physics

```jsx

```

## Drag Controls with Constraints

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

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

## Swipe Detection

```jsx
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`:

```jsx
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](https://github.com/C-Jeril)
- **Source:** [C-Jeril/framer-motion-skills](https://github.com/C-Jeril/framer-motion-skills)
- **License:** MIT
- **Homepage:** https://kuakua.app

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-c-jeril-framer-motion-skills-framer-motion-gestures
- Seller: https://agentstack.voostack.com/s/c-jeril
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.