Medium 300 500ms
This covers the 300-500ms animation sweet spot where users actually watch what's happening. You get all the Disney principles in play here: proper squash and stretch, anticipation phases around 80-120ms, follow-through on complex elements. The source includes solid easing curves for different moods (natural, bouncy, dramatic) and shows how to stagger children with 50ms delays. Use this for page transitions, modals, illustrated features, anything where the motion itself communicates meaning. The key insight is right: this duration range is where animation stops being decoration and starts being storytelling. Users remember these, so the polish matters more than quick micro-interactions.
- skills.sh installs
- 530
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill medium-300-500ms --agent claude-codeInstalls into .claude/skills of the current project.
Files
Medium Animations (300-500ms)
The 300-500ms range is standard animation territory. Long enough to be watched, short enough to not impede flow. The workhorse duration for meaningful motion.
Disney Principles at Medium Duration
All 12 Principles Applicable
Squash & Stretch: Full expression - visible deformation for bouncing, elastic elements. 15-25% stretch feels natural.
Anticipation: Clear preparation - 80-120ms anticipation before main action. Pull back before push forward.
Staging: Multi-element choreography possible - primary action leads, supporting elements follow.
Straight Ahead/Pose to Pose: Pose to pose recommended - define key positions, let easing handle in-betweens.
Follow Through: Essential - overlapping action where parts settle at different rates.
Slow In/Slow Out: Critical for naturalism - both directions need proper easing.
Arcs: Natural motion paths - elements should travel on curves matching real physics.
Secondary Action: Multiple secondary actions - hair follows head, shadow follows object.
Timing: 18-30 frames at 60fps. Enough frames for nuanced motion.
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 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
- 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
Recommended
More Design & UI/UX
universal-industrydylantarre/animation-principlesUse when designing animations for any industry or when industry-specific guidelines do not apply530skills.sh installstrust-reliabilitydylantarre/animation-principlesUse when creating animations that build user confidence, establish credibility, and communicate dependability.529skills.sh installsdeliberate-1200-2000msdylantarre/animation-principlesUse when building slow intentional animations between 1200-2000ms - app intros, loading sequences, storytelling moments that create emotional resonance528skills.sh installssmall-200-300msdylantarre/animation-principlesUse when building small transitions between 200-300ms - modal appearances, card expansions, navigation transitions that users consciously perceive528skills.sh installsuniversal-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 installs