
Emotional Disconnect
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-codeInstalls 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- Problem Diagnosis534
- Responsive Adaptive534
- State Changes534
- Popmotion533
- Professionalism Credibility533
- Comfort Safety532
- Implementation Debugging532
- Technical Constraints532
- Friendliness Approachability531
- Motion Sickness531
- Large 500 800ms530
- Medium 300 500ms530
- Universal Industry530
- Trust Reliability529
- Deliberate 1200 2000ms528
- Product Manager528
- Small 200 300ms528
- Universal Elements528
- Universal Practitioner527
- Universal Solutions527
- Universal Tool527
- Accessibility Issues525
- Universal Fallback525
- Instant 0 100ms524