Agent-Skills.md

Agent Skills: Universal Animation Principles

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

UncategorizedID: dylantarre/animation-principles/universal-industry

Repository

dylantarre/animation-principles
dylantarreLicense: MIT
52

Install this agent skill to your local

pnpm dlx add-skill https://github.com/dylantarre/animation-principles/tree/HEAD/skills/08-by-industry/universal-industry

Skill Files

Browse the full folder contents for universal-industry.

Download Skill

Loading file tree…

skills/08-by-industry/universal-industry/SKILL.md

Skill Metadata

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.