Small 200 300ms
This covers transitions in the 200-300ms range, where users consciously perceive motion rather than just registering a state change. It's your go-to for modals, card expansions, navigation drawers, and anything that needs to feel deliberate without dragging. The guide breaks down which Disney animation principles actually work at this duration (squash and stretch, follow through, arcs) versus what doesn't (complex sequences, long distances). Includes specific easing curves for different personalities, from professional cubic-bezier(0.4, 0, 0.2, 1) at 220ms to bouncy cubic-bezier(0.34, 1.56, 0.64, 1) at 280ms. The key insight is right: at this speed, users track the motion and process spatial relationships, so use it to guide attention.
- skills.sh installs
- 528
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill small-200-300ms --agent claude-codeInstalls into .claude/skills of the current project.
Files
Small Transitions (200-300ms)
At 200-300ms, users consciously perceive motion. This duration bridges micro-interactions and full animations - ideal for UI state changes.
Disney Principles at Small Duration
Works Well
Squash & Stretch: Visible but restrained - 10-15% for playful interfaces, 5% for professional.
Anticipation: Brief wind-up works - 40-60ms preparation enhances 200ms main action.
Staging: Clear hierarchy - primary element leads, secondary follows by 50-100ms.
Straight Ahead/Pose to Pose: Pose to pose preferred - keyframes create polished motion.
Follow Through: Noticeable overshoot - 5-10% past target adds life.
Slow In/Slow Out: Full easing curves - both ease-in-out and custom beziers shine.
Arcs: Natural curves enhance - elements can travel on arcs rather than straight lines.
Secondary Action: One or two secondary actions - fade + scale, move + rotate.
Timing: 12-18 frames at 60fps. Smooth, deliberate motion.
Exaggeration: Moderate to pronounced - depends on brand personality.
Solid Drawing: Full transform combinations - translate, scale, rotate together.
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- Universal Elements528
- Universal Practitioner527
- Universal Solutions527
- Universal Tool527
- Accessibility Issues525
- Universal Fallback525
- Instant 0 100ms524
- Ux Friction524
- Media Publishing521
- Slow 800 1200ms520
- Universal Mindset519
- Universal Timing519
- Animation Principles Absolute Beginner
- Animation Principles Advanced
- Animation Principles Deep Dive
- Animation Principles Expert
- Animation Principles Intermediate
- Animation Principles Master
- Animation Principles Novice
- Animation Principles Quick Start
- Animation Principles Refresher
- Animation Principles Teaching Others
- Animation Principles Troubleshooting
- Animation Principles Universal Reference
Recommended
More Design & UI/UX
universal-elementsdylantarre/animation-principlesUse when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types528skills.sh installsuniversal-practitionerdylantarre/animation-principlesUse when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 principles is needed.527skills.sh installsuniversal-solutionsdylantarre/animation-principlesUse when facing any animation problem as a comprehensive diagnostic framework527skills.sh installsuniversal-tooldylantarre/animation-principlesUse when implementing Disney's 12 animation principles with any animation tool or framework527skills.sh installsinstant-0-100msdylantarre/animation-principlesUse when building instantaneous UI feedback under 100ms - button presses, toggles, state changes that feel immediate and responsive524skills.sh installs
ramsartivilla/agents-configRun accessibility and visual design review on components. Use when reviewing UI code for WCAG compliance and design issues.523skills.sh installs