Deliberate 1200 2000ms
Use this when you're building those big, theatrical animations that take 1.2 to 2 seconds, like app launch sequences or achievement celebrations. It's grounded in Disney's animation principles adapted for interfaces: anticipation curves of 300-400ms, 30-40% squash and stretch for personality, extended follow-through settling. The easing curves and keyframe examples are specific and tested. The critical bit is knowing these are brand moments, not standard UI. They require skip buttons, returning user detection, and motion sensitivity checks. If you're animating anything users will see more than once, you're probably in the wrong duration range.
- skills.sh installs
- 528
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill deliberate-1200-2000ms --agent claude-codeInstalls into .claude/skills of the current project.
Files
Deliberate Animations (1200-2000ms)
At 1200-2000ms, you're creating experiences, not interfaces. This duration is for moments of genuine storytelling where animation itself is the content.
Disney Principles at Deliberate Speed
Full Narrative Expression
Squash & Stretch: Character-defining - 30-40% deformation creates personality. Objects become characters.
Anticipation: Full dramatic preparation - 300-400ms wind-up creates tension and expectation.
Staging: Scene direction - think cinematography. Establish shot, then detail. Clear narrative flow.
Straight Ahead/Pose to Pose: Pose to pose mandatory - 6-10 key poses define the narrative arc.
Follow Through: Extended settling - 300-500ms of secondary motion after primary completes.
Slow In/Slow Out: Narrative pacing - ease curves tell emotional stories. Sharp starts mean urgency, soft ends mean resolution.
Arcs: Orchestrated paths - motion paths are designed, not default. Each element's trajectory contributes to composition.
Secondary Action: Full ecosystem - primary, secondary, tertiary, ambient all working 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- 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
- Animation Principles Quick Start
- Animation Principles Refresher
- Animation Principles Teaching Others
Recommended
More Design & UI/UX
small-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 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