# Fitness Wellness > Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences - Skill: `tomevault-io/fitness-wellness` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/fitness-wellness` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/fitness-wellness/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/fitness-wellness --- # 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. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/dylantarre) — claim your Tome and manage your conversions.