Fitness Wellness
This is a solid reference for applying Disney's 12 animation principles to fitness and wellness interfaces. It breaks down how to handle the dual personality problem these apps face: energetic, punchy animations for workouts (150ms button presses, bouncy achievement pops) versus slow, calming motion for meditation features (500ms fades, breathing-synced timing). The timing tables are practical, and the principle-by-principle breakdown covers the usual suspects like progress rings, workout countdowns, and achievement celebrations. The core insight is right: match your animation energy to activity intensity. Use it when you need to justify animation decisions to stakeholders or need a quick reference for easing curves and durations.
- skills.sh installs
- 709
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill fitness-wellness --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Presentations705
- E Commerce Retail690
- Educator Teacher690
- Accessible Motion689
- Anime Js682
- Emotional Narrative674
- Rhythm Pacing663
- Healthcare Medical654
- Lottie Bodymovin652
- Hover Interactions650
- Character Appeal648
- Playfulness Fun648
- Creative Director631
- Data Visualization629
- Elegance Sophistication629
- Physics Intuition624
- Carousels Sliders620
- Timing Mastery620
- Transition Sequences619
- Education Learning618
- Rive Animations618
- Travel Hospitality611
- Loading States610
- Dramatic 2000ms Plus609
Recommended
More Design & UI/UX
e-commerce-retaildylantarre/animation-principlesUse when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences690skills.sh installs
syncfusion-react-popupssyncfusion/react-ui-components-skillsComprehensive guide for implementing Syncfusion React popup components including Dialog, ToolTip. Use this when building modal/modeless dialogs, confirmation po688skills.sh installs
slides-creatordaymade/claude-code-skillsNarrative-first slide deck creation. Guides users through structured narrative design (ABCDEFG model), then delegates visual generation to baoyu-slide-deck. Tri686skills.sh installssyncfusion-react-appbarsyncfusion/react-ui-components-skillsCreate responsive navigation headers with AppBar component. Build top, bottom, or sticky app bars with buttons, menus, icons, and sidebars. Use when building na686skills.sh installssyncfusion-react-notificationssyncfusion/react-ui-components-skillsComprehensive guide for implementing Syncfusion React Notification components including Badge, Message, Skeleton, Toast, and Spinner. Use this when applying sta684skills.sh installssyncfusion-react-heatmapsyncfusion/react-ui-components-skillsImplement Syncfusion React HeatMap Chart component for data visualization. Use this skill when user needs to create heatmaps, visualize 2D data patterns, displa683skills.sh installs