home / skills / dylantarre / animation-principles / universal-tool
This skill helps you implement Disney's 12 animation principles across any tool or framework, ensuring expressive, coherent motion.
npx playbooks add skill dylantarre/animation-principles --skill universal-toolReview the files below or copy the command above to add this skill to your agents.
---
name: universal-tool
description: Use when implementing Disney's 12 animation principles with any animation tool or framework
---
# Universal Animation Principles
Apply all 12 Disney animation principles regardless of your tool or framework.
## 1. Squash and Stretch
**Concept**: Objects deform when moving, maintaining volume.
**Implementation**:
- When compressing one axis, expand the other
- `scaleX * scaleY ≈ constant`
- Apply on impact, acceleration, or deceleration
**Values**: Compress to 80%, expand to 120%
## 2. Anticipation
**Concept**: Prepare the audience for an action.
**Implementation**:
- Move opposite to the main action first
- ~20% of total duration for wind-up
- Smaller anticipation for faster actions
**Pattern**: Wind-up → Action → Settle
## 3. Staging
**Concept**: Direct viewer attention to what matters.
**Implementation**:
- Blur or fade background elements
- Scale up the focal point
- Use contrast (color, size, motion)
- One clear action at a time
## 4. Straight Ahead / Pose to Pose
**Straight Ahead**: Animate frame-by-frame sequentially. Good for fluid, organic motion.
**Pose to Pose**: Define key poses, then fill in between. Good for precise, planned motion.
**Recommendation**: Use pose-to-pose for UI, straight ahead for particles/effects.
## 5. Follow Through and Overlapping Action
**Concept**: Different parts move at different rates.
**Implementation**:
- Offset timing of child elements
- Add 2-5 frame delay for secondary elements
- Lighter/looser parts drag behind
- Use easing with different curves per element
## 6. Slow In and Slow Out
**Concept**: Natural motion accelerates and decelerates.
**Implementation**:
- Use ease-in-out for most movements
- Ease-out for entrances (arrives gently)
- Ease-in for exits (leaves naturally)
- Linear only for mechanical motion
**Common curve**: `cubic-bezier(0.42, 0, 0.58, 1)`
## 7. Arc
**Concept**: Natural movement follows curved paths.
**Implementation**:
- Avoid straight-line motion for organic elements
- Use motion paths or multi-point keyframes
- Parabolic arcs for thrown objects
- Pendulum arcs for swings
## 8. Secondary Action
**Concept**: Supporting actions reinforce the main action.
**Implementation**:
- Add subtle movements that complement primary
- Examples: hair bounce, shadow movement, particle effects
- Should not distract from main action
- Slightly delayed from primary
## 9. Timing
**Concept**: Speed conveys weight, mood, and character.
| Duration | Feel | Use Case |
|----------|------|----------|
| 50-150ms | Snappy | Micro-interactions |
| 150-300ms | Responsive | Button feedback |
| 300-500ms | Smooth | Page transitions |
| 500-800ms | Deliberate | Modal reveals |
| 1000ms+ | Dramatic | Hero animations |
## 10. Exaggeration
**Concept**: Push beyond realistic to enhance clarity.
**Implementation**:
- Scale movements 20-50% beyond subtle
- Overshoot then settle
- More exaggeration = more cartoony
- UI: subtle exaggeration (5-15% overshoot)
## 11. Solid Drawing
**Concept**: Maintain volume and weight in 3D space.
**Implementation**:
- Consider all three dimensions
- Maintain consistent perspective
- Preserve volume during transformations
- Use shadows to ground elements
## 12. Appeal
**Concept**: Make it pleasing and engaging.
**Implementation**:
- Smooth curves over sharp angles
- Consistent timing patterns
- Clear visual feedback
- Satisfying interaction responses
- Balance between predictable and delightful
## Universal Timing Reference
```
Micro-interaction: 100-200ms
Standard feedback: 200-300ms
Content transition: 300-400ms
Page transition: 400-600ms
```
## Universal Easing Reference
```
Enter screen: ease-out (decelerate)
Leave screen: ease-in (accelerate)
On-screen movement: ease-in-out
Bounce/overshoot: spring physics or elastic
```
## Checklist
Before shipping animation:
- [ ] Does it have easing (not linear)?
- [ ] Is timing appropriate for the action?
- [ ] Does it follow arcs where natural?
- [ ] Is there anticipation for significant actions?
- [ ] Do secondary elements have slight delays?
- [ ] Is the focal point clear?
- [ ] Does it feel satisfying?
This skill packages Disney’s 12 animation principles into a tool-agnostic reference you can apply in any animation pipeline or framework. It gives concrete values, timing ranges, easing suggestions, and implementation patterns so designers and engineers deliver clearer, more satisfying motion. Use it as a checklist and quick reference during design, prototyping, and implementation.
The skill breaks each principle into a concise concept, practical implementation steps, and recommended numeric values or timing ranges. It maps common animation tasks (micro-interactions, transitions, effects) to suggested durations, easing curves, and offsets so you can translate intent across CSS, JS, engines, or motion libraries. A final checklist verifies easing, arcs, anticipation, secondary delays, and focal clarity before shipping.
How do I choose timing for different UI elements?
Match intent: 50–150ms for snappy micro-interactions, 150–300ms for responsive feedback, 300–500ms for smooth transitions, and 500ms+ for deliberate, dramatic motion.
When should I exaggerate motion?
Use exaggeration to improve clarity or delight: 20–50% for expressive animations, but keep UI overshoots subtle (5–15%) to avoid distraction.