fitness-wellness
Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences
By dylantarre · 568 installs
npx skills add dylantarre/animation-principles --skill fitness-wellness
Source repository · Upstream listing
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.