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