Back to list
dylantarre

education-learning

by dylantarre

Disney's 12 Animation Principles - Claude Code Skill Marketplace

1🍴 1📅 Jan 24, 2026

SKILL.md


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

ActionDurationEasing
Answer Feedback200msease-out
Correct Celebration600msspring
Lesson Transition350msease-in-out
Progress Update300msease-out
Achievement Unlock800mscustom-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.

Score

Total Score

60/100

Based on repository quality metrics

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

+10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

1ヶ月以内に更新

+10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

0/5
タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon