From dylantarre-animation-principles
Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin dylantarre-animation-principlesThis skill uses the workspace's default tool permissions.
Apply Disney's 12 principles to expand/collapse elements for smooth, informative reveals.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Apply Disney's 12 principles to expand/collapse elements for smooth, informative reveals.
Content can slightly compress as it collapses, stretch as it expands. Trigger header can squash on click feedback.
Before expanding, header briefly depresses. Chevron starts rotation before content reveals. Builds expectation.
Expanded section should be clearly visible. Consider dimming other accordion items. Active header stays highlighted.
Define clear states: collapsed, expanding, expanded, collapsing. Pose-to-pose for controlled, reversible animations.
Container expands first, content fades in 50-100ms later. Chevron rotation can overshoot and settle. Creates depth.
Expand: ease-out (fast start, smooth finish). Collapse: ease-in (slow start, fast finish). cubic-bezier(0.4, 0, 0.2, 1) works well.
Chevron rotation should ease through the arc. Content items can enter with slight arc paths rather than straight down.
While content reveals (primary), chevron rotates (secondary), sibling accordions may collapse (tertiary).
Important reveals can use more dramatic timing. FAQ accordions can have snappier animations. Match content importance.
Maintain consistent header heights. Content should not jitter during height animation. Use proper height techniques.
Smooth accordions feel polished. Janky height animations feel broken. Proper expand/collapse is worth the technical investment.
.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 */
}
grid-template-rows: smooth heightmax-height: simpler but less precisetransform: rotate chevronsopacity: content fadeoverflow: hidden during transition