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.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill accordions-dropdowns --agent claude-code