universal-industry

What this skill does

# Universal Animation Principles

Apply Disney's 12 principles as flexible foundations that adapt to any industry context with sensible defaults.

## The 12 Principles Applied

### 1. Squash & Stretch
- **Default**: Subtle compression on interactive elements
- **Adjust By**: Brand personality (playful = more, serious = less)
- **Universal Rule**: Never distort data or important content

### 2. Anticipation
- **Default**: Brief pause before significant actions
- **Adjust By**: Action importance (bigger action = more anticipation)
- **Universal Rule**: Always signal before irreversible actions

### 3. Staging
- **Default**: Primary action takes visual focus
- **Adjust By**: Content hierarchy and user goals
- **Universal Rule**: One main focus per screen state

### 4. Straight Ahead & Pose to Pose
- **Default**: Pose to pose for UI, straight ahead for data
- **Adjust By**: Content type and interaction pattern
- **Universal Rule**: Match approach to content predictability

### 5. Follow Through & Overlapping Action
- **Default**: Related elements animate in sequence
- **Adjust By**: Visual complexity and element relationships
- **Universal Rule**: Primary element completes before secondary

### 6. Slow In & Slow Out
- **Default**: ease-in-out for most transitions
- **Adjust By**: UI context (entrances = ease-out, exits = ease-in)
- **Universal Rule**: Never use linear for UI motion

### 7. Arc
- **Default**: Subtle curves for natural movement
- **Adjust By**: Interface formality (casual = more arc)
- **Universal Rule**: Straight lines for data, curves for character

### 8. Secondary Action
- **Default**: One supporting animation per primary action
- **Adjust By**: Moment importance and brand expression
- **Universal Rule**: Secondary never overshadows primary

### 9. Timing
- **Default**: 200-300ms for standard interactions
- **Adjust By**: Industry pace and user expectations
- **Universal Rule**: Faster for frequent, slower for significant

### 10. Exaggeration
- **Default**: Subtle, 10-20% beyond literal
- **Adjust By**: Brand personality and context appropriateness
- **Universal Rule**: Exaggerate successes, minimize failures

### 11. Solid Drawing
- **Default**: Consistent visual language throughout
- **Adjust By**: Platform conventions and brand guidelines
- **Universal Rule**: Maintain perspective and proportions

### 12. Appeal
- **Default**: Clean, refined motion that feels intentional
- **Adjust By**: Target audience and brand personality
- **Universal Rule**: Animation should never feel accidental

## Universal Timing Defaults

| Action | Duration | Easing |
|--------|----------|--------|
| Micro-interaction | 100-150ms | ease-out |
| Standard Transition | 200-300ms | ease-in-out |
| Complex Animation | 300-500ms | ease-in-out |
| Emphasis Moment | 400-600ms | custom |
| Page Transition | 300-400ms | ease-in-out |

## Adaptation Framework

### By Brand Personality
- **Professional**: Reduce squash/stretch, minimize exaggeration
- **Playful**: Increase bounce, add secondary actions
- **Premium**: Slower timing, refined easing curves
- **Energetic**: Faster timing, more dynamic motion

### By User Context
- **Working**: Minimize animation, maximize efficiency
- **Browsing**: Enhance discovery with motion
- **Celebrating**: Amplify positive moments
- **Learning**: Support comprehension with motion

## Key Principle
Start with sensible defaults, then calibrate based on industry expectations, brand personality, and user context. When in doubt, err toward subtlety and efficiency.