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);