Use when animation feels wrong, creates unintended emotional response, or mismatches context

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

emotional-disconnect