Claude MarketplacesSubmit
dylantarre avatar

Education Learning

dylantarre/animation-principles

A comprehensive guide for applying Disney's 12 animation principles to educational interfaces. You get specific timing recommendations (200ms for answer feedback, 600ms for celebrations), easing functions for different interactions, and concrete examples like how mascots should stretch for personality or how checkmarks should land before triggering celebration effects. The core philosophy is smart: celebrate successes generously with longer animations (500-800ms) but keep error feedback quick and gentle so learners don't feel discouraged. If you're building a learning platform or tutoring app and want your animations to feel purposeful rather than decorative, this gives you a solid framework grounded in actual animation theory.

skills.sh installs
618
GitHub stars
146
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add dylantarre/animation-principles --skill education-learning --agent claude-code

Installs into .claude/skills of the current project.

Files

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
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/dylantarre/animation-principles
Category
Design & UI/UX
First seen
Jun 3, 2026

More from dylantarre/animation-principles

All 144

Recommended

More Design & UI/UX
1dylantarre avatarrive-animationsdylantarre/animation-principlesUse when implementing Disney's 12 animation principles with Rive interactive animations618skills.sh installs
2dylantarre avatartravel-hospitalitydylantarre/animation-principlesUse when designing animations for travel booking, hospitality apps, tourism platforms, or vacation planning experiences611skills.sh installs
3dylantarre avatarnotifications-toastsdylantarre/animation-principlesUse when animating notifications, toasts, alerts, snackbars, or system messages to grab attention appropriately606skills.sh installs
4dylantarre avatarbuttons-ctasdylantarre/animation-principlesUse when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions598skills.sh installs
5dylantarre avataranimator-traditionaldylantarre/animation-principlesUse when creating hand-drawn or classical animation, working with frame-by-frame techniques, or applying Disney principles in their original artistic context.591skills.sh installs
6dylantarre avatarfintech-bankingdylantarre/animation-principlesUse when designing animations for banking apps, payment systems, investment platforms, or financial dashboards581skills.sh installs