Timing Calibration
When animations feel off and you're getting "too fast" or "too slow" feedback, this gives you Disney-inspired timing principles translated into code. It breaks down duration by element size (micro-interactions at 100-150ms, transitions at 200-400ms), provides a timing scale you can drop into CSS custom properties, and explains why easing matters more than you think. The troubleshooting checklist is actually useful: test at 2x speed, check if similar elements have similar timing, make sure nothing exceeds 400ms for UI. It won't teach you animation theory, but if you need to fix sluggish modals or twitchy buttons right now, the quick reference table and code patterns get you there.
- skills.sh installs
- 543
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill timing-calibration --agent claude-codeInstalls into .claude/skills of the current project.
Files
Timing Calibration
Get animation speed right using Disney's timing principles.
Problem Indicators
- "Too slow" or "too fast" feedback
- Animations feel inconsistent
- Similar actions have different speeds
- Users wait for animations
- Motion feels robotic or unnatural
Diagnosis by Principle
Timing
Issue: Duration doesn't match action type Fix: Micro-interactions: 100-150ms. Transitions: 200-400ms. Complex reveals: 400-600ms. Never exceed 1s for UI.
Slow In and Slow Out
Issue: Linear timing feels mechanical Fix: Use easing. Ease-out for entrances (fast start, soft landing). Ease-in for exits (soft start, quick finish).
Arcs
Issue: Straight-line motion at wrong speed Fix: Curved paths need more time than straight paths. Increase duration for arc motion.
Staging
Issue: Multiple speeds compete Fix: Similar elements should animate at similar speeds. Create timing harmony.
Secondary Action
Issue: Secondary animations at wrong relative speed Fix: Secondary actions should be slightly slower than primary. Creates natural hierarchy.
Timing Scale
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- Continuous Loops542
- Lists Grids542
- Urgency Action542
- User Feedback Clarity542
- Power Confidence540
- Feedback Indicators539
- Universal Patterns539
- Continuous Infinite535
- Emotional Disconnect534
- Problem Diagnosis534
- Responsive Adaptive534
- 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
Recommended
More Design & UI/UX
lists-gridsdylantarre/animation-principlesUse when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states542skills.sh installsurgency-actiondylantarre/animation-principlesUse when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.542skills.sh installs
glassmorphismainergiz/design-inspirationsCreates frosted glass UI elements with blur, transparency, and subtle borders. Use when building overlays, floating controls, tooltips, or any element that shou541skills.sh installspower-confidencedylantarre/animation-principlesUse when creating animations that convey strength, authority, or bold confidence in brand and product.540skills.sh installsstate-changesdylantarre/animation-principlesUse when elements transform in place - toggle switches, expanding accordions, checkbox animations, button states, or any transformation without entering/exiting534skills.sh installsimplementation-debuggingdylantarre/animation-principlesUse when animation doesn't work as expected, has bugs, or behaves inconsistently532skills.sh installs