universal-industry

Use when designing animations for any industry or when industry-specific guidelines do not apply

$ 安裝

git clone https://github.com/dylantarre/animation-principles /tmp/animation-principles && cp -r /tmp/animation-principles/skills/08-by-industry/universal-industry ~/.claude/skills/animation-principles

// tip: Run this command in your terminal to install the skill


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

ActionDurationEasing
Micro-interaction100-150msease-out
Standard Transition200-300msease-in-out
Complex Animation300-500msease-in-out
Emphasis Moment400-600mscustom
Page Transition300-400msease-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.