Fitness Wellness

dylantarre/animation-principles/skills/08-by-industry/fitness-wellness

by dylantarre83597134ba8fNo license99 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 9 months ago

Use when designing animations for fitness apps, wellness platforms, workout trackers, or meditation experiences

Instructions onlyDesign & Creative
AI-generated overview

Guides animation design for fitness, wellness, workout and meditation apps using Disney's 12 principles.

What it does
This skill provides design guidance for animating fitness and wellness interfaces, mapping Disney's 12 animation principles onto elements such as workout buttons, progress rings, activity icons, timers and meditation guides. It also lists industry timing standards with durations and easing for actions like button presses, ring completion, workout transitions, meditation fades and achievement pops. The output is design direction rather than code or files.
When to use it
Use it when designing motion or animation for fitness apps, wellness platforms, workout trackers or meditation experiences. It is suited to choosing timing, easing and celebratory motion that matches activity intensity.
Requirements
No tools, packages, runtimes or credentials are required; it is instructions only and ships no scripts.

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

ActionDurationEasing
Button Press150msease-out
Ring Complete600msspring
Workout Transition250msease-in-out
Meditation Fade500msease-in-out
Achievement Pop800mscustom-bounce

Key Principle

Match animation energy to activity intensity. Workouts demand energetic, motivating motion while meditation requires calm, breathing-synced animations. Always celebrate progress.

Source and attribution

Source:dylantarre/animation-principlesinskills/08-by-industry/fitness-wellnessat commit8359713

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal