education-learning
Use when designing animations for educational platforms, e-learning, tutoring apps, or skill-building experiences
Install
npx skills add https://github.com/dylantarre/animation-principles --skill education-learningSKILL.md
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.
Related skills
frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreographyhyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.