SaaS & Productivity Animation Principles

The 12 Principles Applied

1. Squash & Stretch

• Minimal Use: Professional context requires restraint
• Checkboxes: Subtle squash on task completion
• Buttons: Slight compression for tactile feedback

2. Anticipation

• Save Actions: Brief preparation before confirmation
• Form Submit: Button state hints at processing
• Drag Initiation: Element lifts before moving

3. Staging

• Active Task: Current work item takes focus
• Sidebar Navigation: Secondary to main content
• Notifications: Non-intrusive placement

4. Straight Ahead & Pose to Pose

• Workflows: Clear step-by-step processes (pose to pose)
• Real-time Collaboration: Smooth cursor movements (straight ahead)
• Dashboard Updates: Sequential data loading

5. Follow Through & Overlapping Action

• Card Movements: Shadow follows card with delay
• List Reordering: Items settle naturally
• Panel Resizing: Content adjusts after panel stops

6. Slow In & Slow Out

• Professional Easing: Smooth, never bouncy
• Modal Transitions: Confident 250-350ms
• State Changes: Deliberate, not snappy

7. Arc

• Drag and Drop: Natural curved paths
• Kanban Cards: Arc between columns
• Notification Dismiss: Swipe follows curve

8. Secondary Action

• Auto-save Indicator: Subtle pulse while saving
• Sync Status: Background indicator during updates
• Loading Skeleton: Shimmer while data fetches

9. Timing

• Efficient: 150-300ms for most interactions
• Never Slow: Users are here to work
• Instant Feedback: 100ms for input validation

10. Exaggeration

• Almost Never: Productivity demands efficiency
• Milestones Only: Project completion, goals met
• Onboarding: Slightly more playful to engage

11. Solid Drawing

• Data Visualization: Clear, accurate charts
• Icon Consistency: Uniform across all features
• Typography: Readable at all sizes

12. Appeal

• Professional Polish: Refined, not flashy
• Invisible Design: Animations serve, not distract
• Trust & Reliability: Consistent, predictable motion

Industry Timing Standards

Key Principle