home / skills / dylantarre / animation-principles / framer-motion
This skill helps you implement Disney's twelve animation principles in Framer Motion to create expressive, responsive React animations.
npx playbooks add skill dylantarre/animation-principles --skill framer-motionReview the files below or copy the command above to add this skill to your agents.
---
name: framer-motion
description: Use when implementing Disney's 12 animation principles with Framer Motion in React applications
---
# Framer Motion Animation Principles
Implement all 12 Disney animation principles using Framer Motion's declarative React API.
## 1. Squash and Stretch
```jsx
<motion.div
animate={{ scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] }}
transition={{ duration: 0.3, times: [0, 0.5, 1] }}
/>
```
## 2. Anticipation
```jsx
<motion.div
variants={{
idle: { y: 0, scaleY: 1 },
anticipate: { y: 10, scaleY: 0.9 },
jump: { y: -200 }
}}
initial="idle"
animate={["anticipate", "jump"]}
transition={{ duration: 0.5, times: [0, 0.2, 1] }}
/>
```
## 3. Staging
```jsx
<motion.div animate={{ filter: "blur(3px)", opacity: 0.6 }} /> {/* bg */}
<motion.div animate={{ scale: 1.1, zIndex: 10 }} /> {/* hero */}
```
## 4. Straight Ahead / Pose to Pose
```jsx
<motion.div
animate={{
x: [0, 100, 200, 300],
y: [0, -50, 0, -30]
}}
transition={{ duration: 1, ease: "easeInOut" }}
/>
```
## 5. Follow Through and Overlapping Action
```jsx
<motion.div animate={{ x: 200 }} transition={{ duration: 0.5 }}>
<motion.span
animate={{ x: 200 }}
transition={{ duration: 0.5, delay: 0.05 }} // hair
/>
<motion.span
animate={{ x: 200 }}
transition={{ duration: 0.6, delay: 0.1 }} // cape
/>
</motion.div>
```
## 6. Slow In and Slow Out
```jsx
<motion.div
animate={{ x: 300 }}
transition={{
duration: 0.6,
ease: [0.42, 0, 0.58, 1] // easeInOut cubic-bezier
}}
/>
// Or use: "easeIn", "easeOut", "easeInOut"
```
## 7. Arc
```jsx
<motion.div
animate={{
x: [0, 100, 200],
y: [0, -100, 0]
}}
transition={{ duration: 1, ease: "easeInOut" }}
/>
```
## 8. Secondary Action
```jsx
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<motion.span
animate={{ rotate: [0, 10, -10, 0] }}
transition={{ duration: 0.3 }}
>
Icon
</motion.span>
</motion.button>
```
## 9. Timing
```jsx
const timings = {
fast: { duration: 0.15 },
normal: { duration: 0.3 },
slow: { duration: 0.6 },
spring: { type: "spring", stiffness: 300, damping: 20 }
};
```
## 10. Exaggeration
```jsx
<motion.div
animate={{ scale: 1.5, rotate: 720 }}
transition={{
type: "spring",
stiffness: 200,
damping: 10 // low damping = overshoot
}}
/>
```
## 11. Solid Drawing
```jsx
<motion.div
style={{ perspective: 1000 }}
animate={{ rotateX: 45, rotateY: 30 }}
transition={{ duration: 0.5 }}
/>
```
## 12. Appeal
```jsx
<motion.div
whileHover={{
scale: 1.02,
boxShadow: "0 20px 40px rgba(0,0,0,0.2)"
}}
transition={{ duration: 0.3 }}
/>
```
## Stagger Children
```jsx
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.1 }
}
};
<motion.ul variants={container} initial="hidden" animate="show">
{items.map(item => <motion.li variants={itemVariant} />)}
</motion.ul>
```
## Key Framer Motion Features
- `animate` - Target state
- `variants` - Named animation states
- `whileHover` / `whileTap` - Gesture animations
- `transition` - Timing and easing
- `AnimatePresence` - Exit animations
- `useAnimation` - Programmatic control
- `layout` - Auto-animate layout changes
This skill teaches how to implement Disney's 12 animation principles using Framer Motion in React. It provides practical code patterns, timing presets, and composition techniques to create expressive, readable, and production-ready UI animations. The focus is on applying each principle with Framer Motion primitives like animate, variants, transition, and gesture props.
Each principle is demonstrated with small, copy-pasteable Framer Motion examples that map the animation intent (squash, anticipation, follow-through, etc.) to animate, variants, and transition props. The skill highlights composition patterns such as staggered children, nested motion components, and programmatic control with useAnimation to coordinate complex sequences. Timing presets and easing recommendations are included to keep motion consistent across the app.
Can I reuse these patterns across a component library?
Yes. Extract timing presets, variants, and common motion wrappers into a shared library for consistent reuse.
How do I support users who prefer reduced motion?
Detect prefers-reduced-motion in CSS or JS and reduce durations, remove nonessential transforms, or render static states.