Accordions Dropdowns
This one walks you through Disney's 12 animation principles applied specifically to accordions and dropdowns. You get concrete timing recommendations (250-350ms for expand/collapse, 30-50ms staggers), two CSS approaches with the grid-template-rows technique and the simpler max-height fallback, and guidance on sequencing secondary actions like chevron rotation and content fades. The follow-through principle is especially useful here: container expands first, content fades in 50-100ms later, which creates that polished depth you see in good component libraries. It's practical reference material when you're tired of accordions that feel janky or abrupt.
- skills.sh installs
- 545
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill accordions-dropdowns --agent claude-codeInstalls into .claude/skills of the current project.
Files
Accordion & Dropdown Animation Principles
Apply Disney's 12 principles to expand/collapse elements for smooth, informative reveals.
Principles Applied to Accordions
1. Squash & Stretch
Content can slightly compress as it collapses, stretch as it expands. Trigger header can squash on click feedback.
2. Anticipation
Before expanding, header briefly depresses. Chevron starts rotation before content reveals. Builds expectation.
3. Staging
Expanded section should be clearly visible. Consider dimming other accordion items. Active header stays highlighted.
4. Straight Ahead & Pose to Pose
Define clear states: collapsed, expanding, expanded, collapsing. Pose-to-pose for controlled, reversible animations.
5. Follow Through & Overlapping Action
Container expands first, content fades in 50-100ms later. Chevron rotation can overshoot and settle. Creates depth.
6. Ease In & Ease Out
Expand: ease-out (fast start, smooth finish). Collapse: ease-in (slow start, fast finish). cubic-bezier(0.4, 0, 0.2, 1) works well.
7. Arcs
Chevron rotation should ease through the arc. Content items can enter with slight arc paths rather than straight down.
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- Straight Ahead Pose Mastery543
- Timing Calibration543
- Continuous Loops542
- Lists Grids542
- Urgency Action542
- User Feedback Clarity542
- Power Confidence540
- Feedback Indicators539
- Universal Patterns539
- Continuous Infinite535
- Emotional Disconnect534
- Problem Diagnosis534
- Responsive Adaptive534
- State Changes534
- Popmotion533
- Professionalism Credibility533
- Comfort Safety532
- Implementation Debugging532
- Technical Constraints532
- Friendliness Approachability531
- Motion Sickness531
- Large 500 800ms530
- Medium 300 500ms530
- Universal Industry530
Recommended
More Design & UI/UX
timing-calibrationdylantarre/animation-principlesUse when animation speed feels wrong—too fast, too slow, or inconsistent543skills.sh installslists-gridsdylantarre/animation-principlesUse when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states542skills.sh installsurgency-actiondylantarre/animation-principlesUse when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.542skills.sh installs
glassmorphismainergiz/design-inspirationsCreates frosted glass UI elements with blur, transparency, and subtle borders. Use when building overlays, floating controls, tooltips, or any element that shou541skills.sh installspower-confidencedylantarre/animation-principlesUse when creating animations that convey strength, authority, or bold confidence in brand and product.540skills.sh installsstate-changesdylantarre/animation-principlesUse when elements transform in place - toggle switches, expanding accordions, checkbox animations, button states, or any transformation without entering/exiting534skills.sh installs