Universal Emotion Animation Framework
Map Disney's 12 principles to any emotional goal through systematic analysis.
Emotional Goal
Any emotion can be achieved through intentional application of animation principles. This framework helps translate emotional intent into specific motion parameters.
Emotion Mapping Framework
Step 1: Define the Emotion
Identify your target on these spectrums:
- Energy: Low ←→ High
- Valence: Negative ←→ Positive
- Arousal: Calm ←→ Excited
- Dominance: Submissive ←→ Powerful
Step 2: Map Principles to Emotion
| Principle |
Low Energy |
High Energy |
| Squash & Stretch |
0-10% |
20-40% |
| Anticipation |
50-100ms |
150-300ms |
| Timing |
400-800ms |
100-250ms |
| Exaggeration |
0-15% |
25-50% |
| Follow Through |
Extended settle |
Quick bounce |
| Principle |
Serious |
Playful |
| Arc |
Direct/Linear |
Curved/Bouncy |
| Secondary Action |
Minimal |
Abundant |
| Straight Ahead |
Avoid |
Embrace |
| Appeal |
Clean/Geometric |
Round/Organic |
Step 3: Select Easing
| Emotion Type |
Easing Style |
Example |
| Calm |
Symmetric ease |
ease-in-out |
| Confident |
Strong ease-out |
cubic-bezier(0,0,0.2,1) |
| Playful |
Overshoot |
cubic-bezier(0.34,1.56,0.64,1) |
| Urgent |
Sharp ease-out |
cubic-bezier(0.0,0,0.2,1) |
| Elegant |
Extended ease |
cubic-bezier(0.4,0,0.6,1) |
Quick Reference by Emotion
Positive Emotions
- Joy: Fast timing, high squash/stretch, bouncy easing
- Trust: Consistent timing, minimal deformation, smooth easing
- Calm: Slow timing, subtle movement, symmetric easing
- Excitement: Fast timing, high energy, dynamic easing
Functional Emotions
- Urgency: Very fast, direct paths, attention-grabbing
- Professional: Moderate timing, minimal decoration, standard easing
- Friendly: Moderate timing, soft deformation, gentle easing
Premium Emotions
- Elegant: Slower timing, no deformation, refined easing
- Powerful: Deliberate timing, impact emphasis, strong easing
CSS Variables Template
:root {
/* Adjust based on target emotion */
--emotion-duration: 300ms;
--emotion-easing: cubic-bezier(0.4, 0, 0.2, 1);
--emotion-squash: 1;
--emotion-overshoot: 0;
}
Decision Tree
- Is the emotion high or low energy?
- Is the feeling positive, negative, or neutral?
- Should users feel in control or guided?
- Is this a moment or a state?
- What's the brand personality?
Combining Emotions
Real experiences blend emotions. Layer principles:
- Primary emotion: 70% influence
- Secondary emotion: 30% influence
- Adjust timing/easing accordingly
When to Use
- Novel emotional requirements
- Brand-specific interpretations
- Complex emotional journeys
- A/B testing emotional impact
- Cross-cultural considerations
- Accessibility adaptations
1---2name: universal-emotion3description: Use when you need to achieve any emotional outcome through animation—provides a framework for mapping Disney principles to any target emotion.4---5
6# Universal Emotion Animation Framework
7
8Map Disney's 12 principles to any emotional goal through systematic analysis.
9
10## Emotional Goal
11
12Any emotion can be achieved through intentional application of animation principles. This framework helps translate emotional intent into specific motion parameters.
13
14## Emotion Mapping Framework
15
16### Step 1: Define the Emotion
17
18Identify your target on these spectrums:
19- **Energy**: Low ←→ High
20- **Valence**: Negative ←→ Positive
21- **Arousal**: Calm ←→ Excited
22- **Dominance**: Submissive ←→ Powerful
23
24### Step 2: Map Principles to Emotion
25
26| Principle | Low Energy | High Energy |
27|-----------|------------|-------------|
28| Squash & Stretch | 0-10% | 20-40% |
29| Anticipation | 50-100ms | 150-300ms |
30| Timing | 400-800ms | 100-250ms |
31| Exaggeration | 0-15% | 25-50% |
32| Follow Through | Extended settle | Quick bounce |
33
34| Principle | Serious | Playful |
35|-----------|---------|---------|
36| Arc | Direct/Linear | Curved/Bouncy |
37| Secondary Action | Minimal | Abundant |
38| Straight Ahead | Avoid | Embrace |
39| Appeal | Clean/Geometric | Round/Organic |
40
41### Step 3: Select Easing
42
43| Emotion Type | Easing Style | Example |
44|--------------|--------------|---------|
45| Calm | Symmetric ease | `ease-in-out` |
46| Confident | Strong ease-out | `cubic-bezier(0,0,0.2,1)` |
47| Playful | Overshoot | `cubic-bezier(0.34,1.56,0.64,1)` |
48| Urgent | Sharp ease-out | `cubic-bezier(0.0,0,0.2,1)` |
49| Elegant | Extended ease | `cubic-bezier(0.4,0,0.6,1)` |
50
51## Quick Reference by Emotion
52
53### Positive Emotions
54- **Joy**: Fast timing, high squash/stretch, bouncy easing
55- **Trust**: Consistent timing, minimal deformation, smooth easing
56- **Calm**: Slow timing, subtle movement, symmetric easing
57- **Excitement**: Fast timing, high energy, dynamic easing
58
59### Functional Emotions
60- **Urgency**: Very fast, direct paths, attention-grabbing
61- **Professional**: Moderate timing, minimal decoration, standard easing
62- **Friendly**: Moderate timing, soft deformation, gentle easing
63
64### Premium Emotions
65- **Elegant**: Slower timing, no deformation, refined easing
66- **Powerful**: Deliberate timing, impact emphasis, strong easing
67
68## CSS Variables Template
69
70```css
71:root {
72 /* Adjust based on target emotion */
73 --emotion-duration: 300ms;
74 --emotion-easing: cubic-bezier(0.4, 0, 0.2, 1);
75 --emotion-squash: 1;
76 --emotion-overshoot: 0;
77}
78```
79
80## Decision Tree
81
821. Is the emotion high or low energy?
832. Is the feeling positive, negative, or neutral?
843. Should users feel in control or guided?
854. Is this a moment or a state?
865. What's the brand personality?
87
88## Combining Emotions
89
90Real experiences blend emotions. Layer principles:
91- Primary emotion: 70% influence
92- Secondary emotion: 30% influence
93- Adjust timing/easing accordingly
94
95## When to Use
96
97- Novel emotional requirements
98- Brand-specific interpretations
99- Complex emotional journeys
100- A/B testing emotional impact
101- Cross-cultural considerations
102- Accessibility adaptations
majiayu000