Enterprise & B2B Animation Principles
Apply Disney's 12 principles to create trustworthy, efficient experiences that prioritize clarity and professional credibility.
The 12 Principles Applied
1. Squash & Stretch
- Almost Never: Enterprise requires utmost professionalism
- Data Points: Subtle pulse for live updates
- Buttons: Minimal, if any, deformation
2. Anticipation
- Form Submissions: Brief processing indication
- Data Actions: Moment before confirmation
- Navigation Changes: Subtle preparation cues
3. Staging
- Data Tables: Primary content focus
- Action Buttons: Clear but not flashy
- Notifications: Non-disruptive placement
4. Straight Ahead & Pose to Pose
- Dashboards: Real-time data streams (straight ahead)
- Wizards/Flows: Explicit step progression (pose to pose)
- Report Generation: Sequential build
5. Follow Through & Overlapping Action
- Table Updates: Row highlights, then data refreshes
- Panel Expansions: Container opens, content follows
- Filter Applications: UI adjusts, then data loads
6. Slow In & Slow Out
- All Transitions: Smooth, professional easing
- Modal Opens: Confident 250-300ms
- State Changes: Deliberate, measured motion
7. Arc
- Minimal Use: Straight lines suggest efficiency
- Drag Operations: Slight natural curve
- Data Flow Diagrams: Curved connection lines
8. Secondary Action
- Save Indicator: Subtle spinner while processing
- Sync Status: Background activity indication
- Validation: Inline feedback during input
9. Timing
- Efficient: 150-250ms for most interactions
- Never Delay Work: Speed is respect for user time
- Instant Feedback: 100ms for input responses
10. Exaggeration
- Avoid Completely: Enterprise must be understated
- Exception: Critical alerts warrant attention
- Milestone Only: Major achievements, sparingly
11. Solid Drawing
- Data Accuracy: Charts must be precise
- Typography: Clear, readable business fonts
- Icon System: Consistent, professional set
12. Appeal
- Professional Trust: Motion builds credibility
- Invisible Polish: Refined but not flashy
- Reliability Signal: Consistent, predictable behavior
Industry Timing Standards
| Action | Duration | Easing |
|---|---|---|
| Button Feedback | 100ms | ease-out |
| Modal Open | 250ms | ease-out |
| Table Row Update | 200ms | ease-in-out |
| Panel Transition | 300ms | ease-in-out |
| Toast Message | 200ms | ease-out |
Key Principle
Enterprise users are working, not playing. Animation exists solely to provide feedback, maintain orientation, and signal state changes. Every millisecond of animation must earn its place through utility.