Healthcare Medical

dylantarre/animation-principles/skills/08-by-industry/healthcare-medical

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

Use when designing animations for medical apps, patient portals, telehealth, or health tracking interfaces

Instructions onlyDesign & Creative
AI-generated overview

Guidance for designing calm, trustworthy animations in medical, telehealth, and health-tracking interfaces.

What it does
This skill provides design guidance for applying Disney's twelve animation principles to healthcare interfaces such as medical apps, patient portals, telehealth, and health tracking. It maps each principle to concrete interface situations, including breathing exercises, appointment booking, test results, alerts, and dashboards. It also supplies a table of recommended durations and easing curves for common actions like page transitions, modal opens, alerts, data refresh, and success feedback.
When to use it
Use it when planning or reviewing motion and transition design for medical, patient-facing, or health-monitoring products. It fits work where clarity, accessibility, and reduced anxiety matter more than playful or expressive animation.
Requirements
No tools, packages, or credentials are needed; it is instructions only and ships no scripts.

Healthcare & Medical Animation Principles

Apply Disney's 12 principles to create calming, trustworthy experiences that prioritize clarity and reduce anxiety.

The 12 Principles Applied

1. Squash & Stretch

  • Minimal Use: Avoid playful squash on health data
  • Breathing Exercises: Gentle expand/contract for guided breathing
  • Heart Rate: Subtle pulse matching actual rhythm

2. Anticipation

  • Appointment Booking: Brief preparation before confirmation
  • Test Results: Thoughtful pause before revealing sensitive data
  • Medication Reminders: Gentle fade-in, never jarring

3. Staging

  • Critical Alerts: Center stage with clear hierarchy
  • Vital Signs: Most important metrics prominently displayed
  • Privacy First: Blur or hide sensitive info until focused

4. Straight Ahead & Pose to Pose

  • Health Journeys: Step-by-step progress (pose to pose)
  • Real-time Monitoring: Continuous data streams (straight ahead)
  • Onboarding: Clear sequential steps

5. Follow Through & Overlapping Action

  • Dashboard Load: Cards appear in logical health order
  • Prescription Updates: Medicine icon settles before details
  • Chart Animations: Data points connect sequentially

6. Slow In & Slow Out

  • All Transitions: Gentle easing, never abrupt
  • Modal Reveals: Soft fade-in for sensitive information
  • Navigation: Smooth 400-500ms transitions

7. Arc

  • Progress Indicators: Circular arcs for completion
  • Body Diagrams: Smooth paths between body regions
  • Timeline Navigation: Curved paths through health history

8. Secondary Action

  • Confirmation Checkmarks: Gentle pulse after booking
  • Loading States: Calming animations during data fetch
  • Success States: Subtle color transitions

9. Timing

  • Slower Overall: 400-600ms for calm, measured feel
  • Critical Alerts: Faster 200ms to ensure attention
  • Data Entry: Responsive 150ms feedback

10. Exaggeration

  • Avoid in Most Cases: Medical context requires restraint
  • Emergency Only: Reserved for urgent alerts
  • Celebrations: Subtle for health milestones

11. Solid Drawing

  • Anatomical Accuracy: Correct body representations
  • Chart Clarity: Legible graphs at all sizes
  • Accessibility: High contrast, readable animations

12. Appeal

  • Calm Professionalism: Trust through restraint
  • Warm Colors: Soft blues, greens for comfort
  • Human Touch: Gentle transitions feel caring

Industry Timing Standards

ActionDurationEasing
Page Transition400-500msease-in-out
Modal Open350msease-out
Alert Appearance200msease-out
Data Refresh300msease-in-out
Success Feedback400msease-out

Key Principle

Animations must never cause anxiety or confusion. Prioritize clarity, accessibility, and a calming presence. When in doubt, animate less.

Source and attribution

Source:dylantarre/animation-principlesinskills/08-by-industry/healthcare-medicalat commit8359713

License: No license

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

Report or request removal