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
- Name the target emotion - "This should feel calm"
- Match easing to emotion - Bouncy = playful, smooth = calm
- Adjust timing to context - Slow down serious moments
- Remove mismatch sources - Cut animations that fight the tone
- 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
| Emotion | Easing | Timing | Effects |
|---|---|---|---|
| Joy | Bouncy overshoot | Fast | Squash/stretch, scale up |
| Calm | Gentle ease-out | Slow | Fade, subtle slide |
| Trust | Smooth, predictable | Medium | Minimal, consistent |
| Urgency | Sharp ease-in | Fast | Direct, no overshoot |
| Playful | Spring physics | Variable | Rotation, bounce |
| Serious | Linear or subtle ease | Slow | Minimal movement |
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);