education-learning

---
name: education-learning
description: Use when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences
---

# Education & Learning Animation Principles

Apply Disney's 12 principles to create engaging, encouraging experiences that support comprehension and celebrate progress.

## The 12 Principles Applied

### 1. Squash & Stretch
- **Answer Buttons**: Friendly squash on selection
- **Mascots/Characters**: Personality through stretch
- **Achievement Badges**: Bounce with character

### 2. Anticipation
- **Quiz Reveal**: Build-up before showing results
- **Next Lesson**: Preparation for new content
- **Submit Answer**: Moment before feedback

### 3. Staging
- **Learning Content**: Primary focus always
- **Progress Indicators**: Visible but not distracting
- **Interactive Elements**: Clear call to action

### 4. Straight Ahead & Pose to Pose
- **Video Lessons**: Continuous playback (straight ahead)
- **Course Progress**: Step-by-step modules (pose to pose)
- **Interactive Exercises**: Defined question states

### 5. Follow Through & Overlapping Action
- **Correct Answer**: Checkmark lands, then celebration
- **Lesson Cards**: Stack with natural follow-through
- **Points Counter**: Numbers settle after update

### 6. Slow In & Slow Out
- **Gentle Transitions**: Nothing jarring while learning
- **Content Reveals**: Comfortable pacing
- **Modal Opens**: Smooth 300-400ms

### 7. Arc
- **Progress Paths**: Curved learning journeys
- **Drag Answers**: Natural arc to drop zones
- **Reward Animations**: Confetti follows arcs

### 8. Secondary Action
- **XP Gained**: Sparkles while points update
- **Streak Maintained**: Fire animation with counter
- **Level Up**: Background effects with main celebration

### 9. Timing
- **Feedback**: Quick 150-200ms for responsiveness
- **Celebrations**: Longer 500-800ms for motivation
- **Transitions**: Moderate 300-400ms for clarity

### 10. Exaggeration
- **Celebrate Success**: Big positive reinforcement
- **Gentle on Errors**: Never discouraging
- **Milestones**: Mark achievements memorably

### 11. Solid Drawing
- **Illustrations**: Friendly, consistent art style
- **Diagrams**: Clear educational visuals
- **Icons**: Approachable, not intimidating

### 12. Appeal
- **Encouraging Personality**: Warm and supportive
- **Age-Appropriate**: Match target learner
- **Motivation Design**: Reward-driven animations

## Industry Timing Standards

| Action | Duration | Easing |
|--------|----------|--------|
| Answer Feedback | 200ms | ease-out |
| Correct Celebration | 600ms | spring |
| Lesson Transition | 350ms | ease-in-out |
| Progress Update | 300ms | ease-out |
| Achievement Unlock | 800ms | custom-bounce |

## Key Principle
Animation should encourage and reward. Celebrate progress generously, handle mistakes gently, and maintain engagement through thoughtful micro-interactions that make learning feel like an adventure.