Large 500 800ms
This is your guide for animations that demand attention. 500-800ms is where movement becomes an event people actually watch, so you save it for hero reveals, onboarding flows, and success celebrations. The source walks through all twelve Disney animation principles at this scale, with concrete easing curves and stagger patterns for choreographing multiple elements. The key discipline here is restraint: if you're using 700ms animations on common actions, you're training users to feel impatient. Think of these as theatrical moments that punctuate the experience. One solid take: the implementation examples show proper follow-through with 100-200ms delays on secondary elements, which is what separates animations that feel finished from ones that just stop.
- skills.sh installs
- 530
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill large-500-800ms --agent claude-codeInstalls into .claude/skills of the current project.
Files
Large Animations (500-800ms)
At 500-800ms, animations become events. Users stop and watch. Reserve this duration for significant moments that deserve attention and communicate importance.
Disney Principles at Large Scale
Full Expression of All Principles
Squash & Stretch: Dramatic deformation - 20-30% stretch visible and characterful. Objects feel elastic and alive.
Anticipation: Extended wind-up - 150-200ms anticipation sells the action. Clear "about to happen" signal.
Staging: Sophisticated choreography - multiple elements with clear hierarchy and timing offsets.
Straight Ahead/Pose to Pose: Definitely pose to pose - complex motion needs keyframe control.
Follow Through: Extended settling - elements continue moving 100-200ms after main action completes.
Slow In/Slow Out: Dramatic easing - strong deceleration creates impact at endpoints.
Arcs: Essential - all movement should follow natural curved paths.
Secondary Action: Rich layering - primary, secondary, and tertiary actions possible.
Timing: 30-48 frames at 60fps. Full cinematic range.
Exaggeration: Go bold - this duration supports theatrical expression.
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- 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
- 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
Recommended
More Design & UI/UX
universal-fallbackdylantarre/animation-principlesUse when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.525skills.sh installsmedia-publishingdylantarre/animation-principlesUse when designing animations for news sites, content platforms, publishing apps, or media consumption experiences521skills.sh installs
hook-tacticsmotion-team/creative-strategy-skillsReference library of 35+ hook and headline tactic types. Use this when a user asks for hooks organized by tactic, wants to know which tactic to use for a given 518skills.sh installsreview-auditmotion-team/creative-strategy-skillsAnalyzes positive customer reviews to surface deep customer insights for ad copy. Use this whenever a user provides customer reviews and wants to understand the497skills.sh installsbrand-intakemotion-team/creative-strategy-skillsRuns a structured brand intake interview and then conducts web research to build a comprehensive brand context document. Use this whenever the user says they're490skills.sh installshook-voice-patternsmotion-team/creative-strategy-skillsA living swipe file of scroll-stopping hook templates collected from the wild — real sentence structures and native voice patterns that have proven they stop th480skills.sh installs