You know that feeling when your animation is technically perfect but somehow wrong? This helps you diagnose why a bouncy button on a medical app feels gross or why your smooth fade feels lifeless. It maps Disney animation principles to emotional mismatch problems, giving you an actual checklist to figure out if your easing curve, timing, or squash and stretch is fighting your content's tone. The emotion to motion table is genuinely useful: it tells you straight up that joyful moments want bouncy overshoot while serious contexts need linear or subtle easing. Best part is the troubleshooting approach of covering your content and asking if the motion alone conveys the right feeling. Saves you from that "it just feels off" conversation with your designer.

skills.sh installs
534
GitHub stars
146
last updated
Aug 21, 2026

Install

$ npx -y skills add dylantarre/animation-principles --skill emotional-disconnect --agent claude-code

Installs into .claude/skills of the current project.

Files

Emotional Disconnect

Align animation emotion with context using Disney's principles.

Problem Indicators

  • Animation feels "off" but hard to articulate
  • Playful motion on serious content
  • Sterile motion on warm content
  • Users describe UI as cold/robotic or chaotic/annoying
  • Mismatch between animation and message

Diagnosis by Principle

Appeal

Issue: Animation lacks emotional resonance Fix: Define the emotional goal. Warm = soft easing, overshoot. Professional = crisp, linear. Match motion to message.

Exaggeration

Issue: Wrong intensity for emotional context Fix: Serious contexts need restraint. Joyful contexts can be bouncy. Match exaggeration to emotional stakes.

Timing

Issue: Speed conflicts with emotional tone Fix: Calm emotions = slower. Excitement = faster. Tension = variable speed. Timing IS emotion.

Squash and Stretch

Issue: Elastic effects on rigid contexts Fix: Squash/stretch implies playfulness and life. Remove for serious, clinical, or professional contexts.

Sponsors

Details

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

More from dylantarre/animation-principles

All 144
1dylantarre avatarpopmotiondylantarre/animation-principlesUse when implementing Disney's 12 animation principles with Popmotion's functional animation library533skills.sh installs
2dylantarre avatarcomfort-safetydylantarre/animation-principlesUse when creating animations that reassure users, reduce anxiety, or communicate protection and security.532skills.sh installs
3albermonte avatarmaterial-3-expressivealbermonte/android-skillsAndroid UI/UX design or review with Material 3 Expressive (M3 Expressive / Material You Expressive). Use when selecting expressive component tokens, defining ex531skills.sh installs
4dylantarre avatarmedium-300-500msdylantarre/animation-principlesUse when building standard animations between 300-500ms - page transitions, significant UI changes, animated illustrations that need clear communication530skills.sh installs
5dylantarre avataruniversal-industrydylantarre/animation-principlesUse when designing animations for any industry or when industry-specific guidelines do not apply530skills.sh installs
6dylantarre avatartrust-reliabilitydylantarre/animation-principlesUse when creating animations that build user confidence, establish credibility, and communicate dependability.529skills.sh installs