accordions-dropdowns
Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions
When & Why to Use This Skill
This Claude skill provides expert guidance and CSS implementations for creating high-quality animations for accordions, dropdowns, and collapsible UI elements. By applying Disney's 12 animation principles—such as Squash & Stretch, Anticipation, and Easing—it helps developers and designers solve the problem of 'janky' or robotic-feeling transitions, replacing them with smooth, professional, and intuitive reveal effects that significantly enhance the user experience.
Use Cases
- Developing seamless FAQ sections that use CSS Grid techniques for smooth height transitions without layout flickering.
- Implementing interactive navigation menus with animated dropdowns that utilize 'Anticipation' and 'Overshoot' for a high-end, responsive feel.
- Designing collapsible dashboard widgets that use staggered internal item animations to guide user focus during expansion.
- Optimizing mobile UI components where space is limited, ensuring that expand/collapse actions feel fluid and maintain visual context for the user.
- Applying advanced easing functions (cubic-bezier) to standard UI elements to align with modern, polished design systems.
| name | accordions-dropdowns |
|---|---|
| description | Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions |
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.
8. Secondary Action
While content reveals (primary), chevron rotates (secondary), sibling accordions may collapse (tertiary).
9. Timing
- Expand/collapse: 250-350ms
- Chevron rotation: 200-250ms
- Content fade: 150-200ms
- Stagger internal items: 30-50ms
- Click feedback: 50ms
10. Exaggeration
Important reveals can use more dramatic timing. FAQ accordions can have snappier animations. Match content importance.
11. Solid Drawing
Maintain consistent header heights. Content should not jitter during height animation. Use proper height techniques.
12. Appeal
Smooth accordions feel polished. Janky height animations feel broken. Proper expand/collapse is worth the technical investment.
CSS Implementation
.accordion-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 300ms ease-out;
}
.accordion-content.open {
grid-template-rows: 1fr;
}
.accordion-inner {
overflow: hidden;
}
.accordion-chevron {
transition: transform 250ms ease-out;
}
.accordion-header[aria-expanded="true"] .accordion-chevron {
transform: rotate(180deg);
}
/* Alternative: animate max-height */
.dropdown-content {
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease-out;
}
.dropdown-content.open {
max-height: 500px; /* larger than content */
}
Key Properties
grid-template-rows: smooth heightmax-height: simpler but less precisetransform: rotate chevronsopacity: content fadeoverflow: hidden during transition