/emotional-disconnect

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.

Follow Through

Issue: Endings don't match emotional intent Fix: Abrupt endings feel harsh. Soft landings feel gentle. Bouncy endings feel playful. Choose consciously.

Quick Fixes

1. Name the target emotion - "This should feel calm"
2. Match easing to emotion - Bouncy = playful, smooth = calm
3. Adjust timing to context - Slow down serious moments
4. Remove mismatch sources - Cut animations that fight the tone
5. Test with emotional vocabulary - Ask users "how does this feel?"

Troubleshooting Checklist

• What emotion should this moment evoke?
• Does animation easing match that emotion?
• Is timing appropriate for emotional context?
• Would removing animation feel better?
• Do similar products use different motion here?
• Ask users: "What 3 words describe this animation?"
• Does animation match content gravity?
• Test: Cover content, does motion emotion match?

Emotion-to-Motion Map

Code Pattern

/* Calm/trustworthy */
--ease-calm: cubic-bezier(0.4, 0, 0.2, 1);

/* Playful/joyful */
--ease-playful: cubic-bezier(0.34, 1.56, 0.64, 1);

/* Urgent/serious */
--ease-urgent: cubic-bezier(0.4, 0, 1, 1);