# Framer Motion Skills

> Six dedicated Framer Motion skills: core animation, React/Next.js integration, variants and orchestration, scroll animations, gestures (drag/tap/hover), and layout/shared transitions.

- Skill: `podo/framer-motion-skills` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add podo/framer-motion-skills`
- Raw SKILL.md: https://api.skillmd.com/api/skills/podo/framer-motion-skills/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: podo (https://skillmd.com/u/podo)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/podo/framer-motion-skills

---


# framer-motion-skills

> Catalogue stub — full package: [C-Jeril/framer-motion-skills](https://github.com/C-Jeril/framer-motion-skills)

## Decision tree

1. **Is the package already installed?**
   Check: your agent's skills directory contains `framer-motion-skills` with content beyond this stub.
   - Yes → invoke `framer-motion-skills` and proceed
   - No → go to step 2

2. **Which agent are you on?**
   - Claude Code → `npx skills add C-Jeril/framer-motion-skills` — or send `! npx skills add …` as a chat message (add `-g` for global, omit for project-only)
   - Cursor → `npx skills add C-Jeril/framer-motion-skills`
   - Other → `npx skills add C-Jeril/framer-motion-skills` or see [GitHub README](https://github.com/C-Jeril/framer-motion-skills)

## Install command

```bash
npx skills add C-Jeril/framer-motion-skills
```

## Invoke after install

- Skill name: `framer-motion-skills`
- Trigger phrases: "Framer Motion", "framer animation", "layout animation", "shared transitions", "motion variants"

## What it does

Six dedicated Framer Motion skills covering the full library surface: core animation primitives (`motion` components, `animate`, `initial`, `exit`), React and Next.js integration patterns, variants and animation orchestration (`staggerChildren`, `delayChildren`, `when`), scroll-linked and scroll-triggered animations (`useScroll`, `useTransform`), gesture-driven interactions (drag, tap, hover, `whileDrag`/`whileHover`/`whileTap`), and layout animations with shared element transitions (`layoutId`).

## When NOT to use

- GSAP-specific projects or complex timeline orchestration (use `gsap-skills`)
- Vanilla CSS animation without a React framework (use `animate-css-skill`)