Transition Sequences
For choreographing multi-step animations like page transitions, modals, or onboarding flows where timing matters. The skill applies Disney's 12 principles to sequences, focusing on staggered starts (50-100ms offsets), 30-50% step overlap, and keeping total duration under 800ms for functional UI. You get concrete timing tables for common patterns (tab changes at 300ms, dramatic reveals at 1000-1500ms) plus formulas for calculating stagger delays. The overlap math is the useful part here since most developers either run everything simultaneously or leave awkward gaps. Includes the mandatory prefers-reduced-motion reminder to skip sequences entirely.
- skills.sh installs
- 619
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill transition-sequences --agent claude-codeInstalls into .claude/skills of the current project.
Files
Transition Sequence Animations
Apply Disney's 12 principles to choreographed multi-step motion.
Principle Application
Squash & Stretch: Each element in sequence can compress/expand independently for organic feel.
Anticipation: Sequence starts with a setup phase. Brief pause or gather before motion begins.
Staging: Direct attention through the sequence. Most important element animates first or last.
Straight Ahead vs Pose-to-Pose: Plan keyframes for each step. Map the entire sequence before implementing.
Follow Through & Overlapping: Elements don't move in unison. Stagger starts by 50-100ms. Let motion cascade.
Slow In/Slow Out: Each step eases. The sequence overall should ease too - faster middle, slower ends.
Arcs: Transitions across space follow arcs. Page sliding left curves slightly, not linear slide.
Secondary Action: Primary transition + secondary details. Page slides while elements within fade/scale.
Timing:
- Step overlap: 30-50% of previous step's duration
- Total sequence: 300-800ms for UI, up to 1500ms for dramatic
- Gap between steps: 0-100ms (overlap preferred)
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
- Categories
- Sales & Marketing, Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Education Learning618
- Rive Animations618
- Travel Hospitality611
- Loading States610
- Dramatic 2000ms Plus609
- Notifications Toasts606
- Frontend Developer605
- Navigation Menus601
- Buttons Ctas598
- Figma Prototyping597
- Brand Marketing594
- Solid Drawing Mastery593
- Animator Traditional591
- Motion One589
- Naturalistic Motion589
- Attention Direction586
- Squash Stretch Mastery583
- Fintech Banking581
- Icons Badges581
- Staging Mastery581
- Gesture Responses579
- Arc Mastery578
- Follow Through Overlapping578
- Gaming Entertainment578
Recommended
More Sales & Marketing
signup-flow-croalirezarezvani/claude-skillsWhen the user wants to optimize signup, registration, account creation, or trial activation flows. Also use when the user mentions "signup conversions," "regist615skills.sh installscompetitor-alternativesalirezarezvani/claude-skillsWhen the user wants to create competitor comparison or alternative pages for SEO and sales enablement. Also use when the user mentions 'alternative page,' 'vs p611skills.sh installsonboarding-croalirezarezvani/claude-skillsWhen the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value. Also use when the user mentions "onboarding flo609skills.sh installschurn-preventionalirezarezvani/claude-skillsReduce voluntary and involuntary churn through cancel flow design, save offers, exit surveys, and dunning sequences. Use when designing or optimizing a cancel f604skills.sh installs
paper-writingwanshuiyin/auto-claude-code-research-in-sleepWorkflow 3: Full paper writing pipeline that goes from a narrative report to a polished, submission-ready PDF. Use when user says "写论文全流程", "write paper pipelin595skills.sh installsfree-tool-strategyalirezarezvani/claude-skillsWhen the user wants to build a free tool for marketing — lead generation, SEO value, or brand awareness. Use when they mention 'engineering as marketing,' 'free592skills.sh installs