dylantarre/animation-principles1 file

Fitness Wellness

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

Specification
Skill ID
dylantarre/animation-principles/fitness-wellness
Publisher
dylantarre
Repository
animation-principles
Installs
0
Files
1
Synced
Sep 23, 2026
How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

dylantarre/animation-principles/fitness-wellnessInstalls these files
  • SKILL.md

What this skill tells the agent

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.

Use this skill in a project

Open any RiverX project, search the Skills panel for dylantarre/animation-principles/fitness-wellness, and install it in one click.

Use this skill