home / skills / dylantarre / animation-principles / emotional-disconnect

emotional-disconnect skill

safe

/skills/12-by-problem-type/emotional-disconnect

This skill helps align animation emotion with context by applying Disney's principles to reduce emotional mismatch in UI motion.

npx playbooks add skill dylantarre/animation-principles --skill emotional-disconnect

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.8 KB

---
name: emotional-disconnect
description: 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

```css
/* 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);
```

Overview

This skill helps you diagnose and fix emotional disconnects in animation by applying Disney's 12 principles. It guides you to align motion with the intended feeling so animations reinforce rather than contradict content. Use it when animation feels wrong, creates unintended responses, or mismatches context.

How this skill works

Inspect animations through a checklist tied to core principles like timing, easing, exaggeration, squash-and-stretch, and follow-through. The skill maps target emotions to concrete motion rules (easing, speed, and effects) and suggests quick fixes and code-ready easing tokens you can drop into CSS or animation systems. It prioritizes testing with user emotional vocabulary to validate changes.

When to use it

When animation feels ‘off’ but you can’t name why
When playful motion appears on serious content or vice versa
When users describe UI as cold, robotic, chaotic, or annoying
Before finalizing animations for product launches or updates
During design reviews to check emotional consistency

Best practices

Name the target emotion for each interaction (e.g., calm, urgent, joyful)
Match easing and timing to that emotion instead of defaulting to popular curves
Favor subtle removal of animation when motion competes with content
Use consistent motion language across similar components for predictable tone
Run quick user tests asking ‘What three words describe this animation?’

Example use cases

A checkout flow uses bouncy success animations that undermine trust—switch to smooth, medium-paced easing
Onboarding screens feel sterile—add gentle ease-out fades and slower timing to create warmth
Error notifications use exaggerated squash/stretch—remove elasticity to keep the message serious
A gaming HUD needs excitement—apply fast timing, overshoot, and spring physics
A medical dashboard requires professionalism—use linear or subtle ease with minimal movement

FAQ

How do I pick an easing curve for a specific emotion?

Start by naming the emotion, then choose from the emotion-to-motion map: playful=elastic/bouncy, calm=gentle ease-out, urgent=sharp ease-in. Test and tweak values for context.

When should I remove animation entirely?

Remove motion when it competes with content clarity, undermines the message, or users report distraction. Silence can convey seriousness and trust.