Responsive Adaptive
This one's about making animation durations actually respond to context instead of hardcoding 300ms everywhere. It covers the practical stuff: scaling duration based on travel distance (with a square root formula), cutting 25% off for mobile devices, respecting prefers-reduced-motion, and adjusting for repeat interactions versus first views. The Disney principles section is a nice touch, showing how squash and stretch or anticipation need different timing on touch versus desktop. The real value is the implementation pattern with CSS custom properties that cascade through media queries. If you're building anything with motion that needs to work across devices and respect user preferences, this gives you a system instead of magic numbers.
- skills.sh installs
- 534
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill responsive-adaptive --agent claude-codeInstalls into .claude/skills of the current project.
Files
Responsive & Adaptive Timing
Responsive timing adapts duration to context: device capability, travel distance, user preferences, and interaction type. One duration doesn't fit all situations.
Disney Principles for Adaptive Motion
Context-Aware Application
Squash & Stretch: Scale with device - more subtle on mobile (less screen real estate for deformation).
Anticipation: Shorter on touch devices - touch users expect faster response than mouse users.
Staging: Adapt to viewport - smaller screens need more focused staging, less simultaneous motion.
Straight Ahead/Pose to Pose: Same approach, scaled duration - poses stay, timing adjusts.
Follow Through: Proportional to distance - longer travel = more follow-through time.
Slow In/Slow Out: Adjust curve intensity - faster animations need sharper easing.
Arcs: Same paths, different speeds - arc shape remains, traversal time changes.
Secondary Action: Reduce on mobile - fewer simultaneous animations for performance.
Timing: THE adaptive variable - timing changes, principles stay.
Exaggeration: Less on smaller screens - proportional to viewport/element size.
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
- Categories
- Frontend Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- State Changes534
- Popmotion533
- Professionalism Credibility533
- Comfort Safety532
- Implementation Debugging532
- Technical Constraints532
- Friendliness Approachability531
- Motion Sickness531
- Large 500 800ms530
- Medium 300 500ms530
- Universal Industry530
- Trust Reliability529
- Deliberate 1200 2000ms528
- Product Manager528
- Small 200 300ms528
- Universal Elements528
- Universal Practitioner527
- Universal Solutions527
- Universal Tool527
- Accessibility Issues525
- Universal Fallback525
- Instant 0 100ms524
- Ux Friction524
- Media Publishing521
Recommended
More Frontend Development
migrate-design-systemplugin87/ux-ui-agent-skillsMap this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) —531skills.sh installstoken-buildplugin87/ux-ui-agent-skillsSet up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS 522skills.sh installs
angular-best-practicessickn33/antigravity-awesome-skillsangular best practices510skills.sh installs
