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