playbooks

home / skills / dylantarre / animation-principles / universal-industry

universal-industry skill

/skills/08-by-industry/universal-industry

This skill helps designers apply Disney's 12 animation principles to any industry, delivering intuitive motion that enhances clarity and brand personality.

npx playbooks add skill dylantarre/animation-principles --skill universal-industry

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

Files (1)
SKILL.md
3.6 KB
---
name: universal-industry
description: Use when designing animations for any industry or when industry-specific guidelines do not apply
---

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

Overview

This skill distills Disney’s 12 animation principles into a practical, industry-agnostic guide for designing motion in interfaces, content, and experiences. It provides sensible defaults, timing presets, and a simple adaptation framework so designers can apply consistent, purposeful animation across any domain. Use it when industry-specific rules are missing or when you need a reliable baseline for motion design.

How this skill works

The skill inspects interaction intent, element hierarchy, and brand personality to recommend which principles to emphasize and how strongly. It supplies default values for timing and easing, plus rules of thumb (e.g., avoid linear motion for UI, signal before irreversible actions). It then suggests calibrated adjustments by brand and user context to ensure motion is both meaningful and efficient.

When to use it

  • Designing UI animations for unfamiliar industries
  • Creating motion guidelines where no style guide exists
  • Calibrating animation for different brand personalities
  • Defining default timing and easing for a product
  • Onboarding designers to consistent animation practices

Best practices

  • Start with the sensible defaults and test conservatively—prefer subtlety over excess
  • Prioritize clarity: one primary focus per screen state and never let secondary motion steal attention
  • Match motion approach to content predictability (pose-to-pose for UI, straight-ahead for data)
  • Signal important or irreversible actions with anticipation and avoid linear easing in UI
  • Adjust squash/stretch and exaggeration based on brand tone; never distort critical content

Example use cases

  • Designing onboarding micro-interactions with 100–150ms micro timings and ease-out for attention
  • Creating a dashboard where data moves on straight arcs and follows slow in/slow out for readability
  • Crafting celebratory feedback with amplified exaggeration and longer emphasis moments
  • Building a product motion system that adapts timing by context: faster for power users, slower for novice flows
  • Formulating cross-platform animation rules that keep perspective, proportions, and visual language consistent

FAQ

How strict are the timing defaults?

They are starting points, not rules. Adjust by frequency, significance, and user expectations—faster for repetitive actions, slower for consequential ones.

When should I avoid playful motion?

Avoid playful exaggeration in professional or safety-critical contexts. Reduce squash/stretch and keep motions minimal when efficiency and comprehension matter most.