framer-motionlisted
Install: claude install-skill claude-dev-suite/claude-dev-suite
# Framer Motion Skill
Animation library for React. Declarative, physics-based, gesture-aware.
## Install
```bash
npm install framer-motion
```
## Core API
| API | Purpose |
|-----|---------|
| `motion.div` | Animatable element |
| `animate` prop | Target state |
| `initial` prop | Starting state |
| `exit` prop | Unmount state (requires AnimatePresence) |
| `variants` | Named animation states, enables orchestration |
| `transition` | Timing, easing, spring config |
| `whileHover / whileTap / whileFocus` | Gesture states |
| `drag` | Drag gesture with constraints |
| `layout / layoutId` | FLIP layout animation |
| `AnimatePresence` | Animates unmounting components |
| `useScroll` | Scroll progress values |
| `useTransform` | Map one motion value to another |
| `useSpring` | Spring-based motion value |
| `useInView` | Observe element entering viewport |
| `useAnimation` | Imperative animation control |
## Variants & Orchestration
```tsx
const container = {
hidden: {},
visible: { transition: { staggerChildren: 0.08, delayChildren: 0.1 } }
};
const item = {
hidden: { opacity: 0, y: 24 },
visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } }
};
<motion.ul variants={container} initial="hidden" whileInView="visible" viewport={{ once: true }}>
{items.map(i => <motion.li key={i} variants={item}>{i}</motion.li>)}
</motion.ul>
```
## AnimatePresence
```tsx
<AnimatePresence mode="wait">
{isVisible && (
<motion.div
key="unique-key"