home / skills / dylantarre / animation-principles / accordions-dropdowns

accordions-dropdowns skill

safe

/skills/07-by-ui-element/accordions-dropdowns

This skill helps you implement Disney-inspired accordion and dropdown animations for smooth reveal transitions and polished UI behavior.

npx playbooks add skill dylantarre/animation-principles --skill accordions-dropdowns

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.8 KB

---
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

```css
.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 height
- `max-height`: simpler but less precise
- `transform`: rotate chevrons
- `opacity`: content fade
- `overflow`: hidden during transition

Overview

This skill encodes Disney's 12 animation principles for accordions, collapsibles, dropdowns, and other expand/collapse UI patterns. It focuses on timing, easing, and layered motion so reveals feel smooth, informative, and polished. Use the guidelines to design predictable states, reduce layout jank, and add purposeful micro-interaction detail. Practical CSS snippets and timing recommendations make implementation straightforward.

How this skill works

The skill maps animation principles to common accordion behaviors: header press, chevron rotation, container height change, and content fade/stagger. It recommends state-driven animations (collapsed, expanding, expanded, collapsing), specific timing windows, and easing curves to match human perception. Techniques include animating grid-template-rows or max-height for height transitions, using transform for chevrons, and staggering child fades for depth.

When to use it

Any accordion, FAQ, or collapsible section where clarity and smoothness matter
Dropdown menus that reveal layered content or multi-row panels
Expanding cards or panels that contain lists or complex inner content
Mobile accordions where perceived performance and touch feedback are critical
Accessible UI where visual cues must match expanded/collapsed state

Best practices

Define clear animation states and drive transitions from aria-expanded or JS state
Prefer transform and opacity for non-layout moves; animate height with grid-template-rows or controlled max-height to avoid jank
Use ease-out for expansion, ease-in for collapse; cubic-bezier(0.4,0,0.2,1) is a good default
Stagger inner items 30–50ms and delay content fade 50–100ms after container expansion
Keep header size consistent and use brief click feedback (≈50ms) to show intent
Allow slightly exaggerated timing for important reveals, but keep overall duration ~250–350ms

Example use cases

FAQ list where each answer reveals with a smooth height transition and chevron rotation
Mobile navigation drawer with collapsing sections that avoid content jitter
Product specs panel that staggers feature list items as the panel opens
Form sections that expand to show contextual fields with subtle overshoot on chevron
Dropdown filters where selecting one option collapses siblings with overlapping timing

FAQ

Should I animate max-height or grid-template-rows?

Grid-template-rows produces smoother, more predictable height changes; max-height is simpler but requires an upper bound and can be less precise.

What durations and easings are recommended?

Use 250–350ms for overall expand/collapse, 200–250ms for chevrons, 150–200ms for fades, and cubic-bezier(0.4,0,0.2,1) or ease-out/in per direction.