education-learning

Original：🇺🇸 English

Translated

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

2installs

Sourcedylantarre/animation-principles

Added on2026-02-09

NPX Install

npx skill4agent add dylantarre/animation-principles education-learning

SKILL.md Content

View Translation Comparison →

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.