# framer-motion-gestures

Скилл для анимаций жестов в Framer Motion: перетаскивание, панорамирование, нажатие, наведение, фокус. Пригодится, когда собираешь интерактивные элементы и нужны подсказки по пропсам и ограничениям.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 766 установок · ★ 10
- Автор: C-Jeril
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/C-Jeril/framer-motion-skills/tree/HEAD/skills/framer-motion-gestures/SKILL.md
- Обновлён: 2026-04-02
- HTML: https://affpapa.org/nevibecode/skills/framer-motion-gestures

## Что делает

Скилл описывает, как включать жесты в Framer Motion. Перетаскивание задаётся пропсом `drag` со значением `"x"`, `"y"` или `true`, границы движения — через `dragConstraints` в виде объекта с `left`, `right`, `top`, `bottom` или через `ref` на контейнер. Для отдачи за края есть `dragElastic`, для инерции после отпускания — `dragMomentum` и `dragTransition` с пружиной.

Кроме drag в скилле разобраны `whileTap`, `whileHover` и `whileFocus`, колбэки `onDrag`, `onDragStart`, `onDragEnd`, `onHoverStart`, `onHoverEnd`. В колбэки приходит объект с точкой, скоростью и смещением от старта. Панорамирование описано как низкоуровневое отслеживание указателя без инерции — в отличие от drag с визуальной отдачей и ограничениями.

Есть раздел с ошибками: не ставить `drag` без `dragConstraints`, если элемент должен оставаться в границах, не задирать `dragElastic` и не анимировать конфликтующие свойства вроде `scale` и `x` одновременно. События drag срабатывают только после того, как указатель пройдёт порог смещения — это повод проверить логику, если обработчик молчит на мелких движениях. Скилл входит в набор framer-motion-skills, рядом с ним идут скиллы для базовой анимации, вариантов и layout-анимаций.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add C-Jeril/framer-motion-skills --skill framer-motion-gestures -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/framer-motion-gestures/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/framer-motion-gestures/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add C-Jeril/framer-motion-skills --skill framer-motion-gestures -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/framer-motion-gestures/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add C-Jeril/framer-motion-skills --skill framer-motion-gestures -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/framer-motion-gestures/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install C-Jeril/framer-motion-skills framer-motion-gestures
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/framer-motion-gestures/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add C-Jeril/framer-motion-skills --skill framer-motion-gestures -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/C-Jeril/framer-motion-skills --path skills/framer-motion-gestures
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/framer-motion-gestures/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add C-Jeril/framer-motion-skills --skill framer-motion-gestures -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/C-Jeril/framer-motion-skills/tree/HEAD/skills/framer-motion-gestures/SKILL.md

## Когда брать
- включить перетаскивание элемента по одной оси
- удержать перетаскиваемый блок внутри контейнера
- добавить отдачу и возврат при выходе за границы
- настроить пружину для инерции после отпускания
- повесить анимацию на нажатие, наведение или фокус

## Примеры запросов агенту
- Сделай карточку с drag="x" и ограничениями по ширине контейнера
- Добавь whileTap и whileHover кнопке с масштабированием
- Настрой dragTransition с пружиной для перетаскиваемого блока

## Похожие
- [framer-motion-animator](https://affpapa.org/nevibecode/skills/framer-motion-animator.md) — скилл · 11100 установок
- [motion-framer](https://affpapa.org/nevibecode/skills/motion-framer.md) — скилл · 5900 установок
- [framer-motion](https://affpapa.org/nevibecode/skills/athevon-framer-motion.md) — скилл · 990 установок
- [motion](https://affpapa.org/nevibecode/skills/motion.md) — скилл · 1100 установок
- [motion-advanced](https://affpapa.org/nevibecode/skills/motion-advanced.md) — скилл · 4600 установок
- [motion-dev-animations](https://affpapa.org/nevibecode/skills/motion-dev-animations.md) — скилл · 594 установки

Из того же набора: [c-jeril/framer-motion-skills](https://affpapa.org/nevibecode/by/c-jeril/framer-motion-skills.md) — 3 карточки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md