Fitness & Wellness Animation Principles
Apply Disney's 12 principles to create motivating, energizing experiences that celebrate achievement and support healthy habits.
The 12 Principles Applied
1. Squash & Stretch
- •Workout Buttons: Energetic squash on tap
- •Progress Rings: Pulse with achievement
- •Activity Icons: Bounce with completion
2. Anticipation
- •Workout Start: Countdown builds energy
- •Timer Begin: Ready-set-go sequence
- •Goal Completion: Suspenseful approach
3. Staging
- •Current Exercise: Full focus on active movement
- •Stats Display: Supporting role during workout
- •Rest Periods: Recovery metrics highlighted
4. Straight Ahead & Pose to Pose
- •Live Workouts: Continuous timer flow (straight ahead)
- •Exercise Sequence: Move-by-move progression (pose to pose)
- •Meditation Guides: Defined breathing phases
5. Follow Through & Overlapping Action
- •Workout Complete: Badge lands, then stats appear
- •Calorie Counter: Numbers settle with follow-through
- •Activity Rings: Animate sequentially with overlap
6. Slow In & Slow Out
- •High Energy Moments: Quick, punchy timing
- •Recovery/Meditation: Slow, calming easing
- •Transitions: Match current activity intensity
7. Arc
- •Progress Circles: Smooth arc completion
- •Running Routes: Curved path visualization
- •Gesture Controls: Natural arced movements
8. Secondary Action
- •Goal Hit: Fireworks while achievement saves
- •Personal Record: Crown appears with celebration
- •Streak Maintained: Fire burns while counter updates
9. Timing
- •Intense Moments: Fast 100-150ms for energy
- •Mindfulness: Slow 500-700ms for calm
- •Standard UI: Moderate 200-300ms
10. Exaggeration
- •Celebrate Big: Fitness thrives on motivation
- •Personal Records: Dramatic achievement reveals
- •Streak Milestones: Memorable celebrations
11. Solid Drawing
- •Body Mechanics: Accurate movement demonstrations
- •Data Visualization: Clear, readable metrics
- •Exercise Illustrations: Proper form representation
12. Appeal
- •Motivational Energy: Uplifting, encouraging motion
- •Dual Modes: Intensity for workouts, calm for wellness
- •Achievement Focus: Every win feels significant
Industry Timing Standards
| Action | Duration | Easing |
|---|---|---|
| Button Press | 150ms | ease-out |
| Ring Complete | 600ms | spring |
| Workout Transition | 250ms | ease-in-out |
| Meditation Fade | 500ms | ease-in-out |
| Achievement Pop | 800ms | custom-bounce |
Key Principle
Match animation energy to activity intensity. Workouts demand energetic, motivating motion while meditation requires calm, breathing-synced animations. Always celebrate progress.