From dylantarre-animation-principles
Use when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states
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 lists and grids for smooth, organized motion.
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 lists and grids for smooth, organized motion.
List items compress slightly when grabbed for reorder. Grid items can stretch when expanding to fill space on filter.
Before list reorders, items briefly compress. Before filter removes items, they can shrink slightly. Prepares for change.
Item being dragged lifts above others (z-index + shadow). Filtered results highlight while others fade. Guide eye to relevant items.
Define states: entering, resting, reordering, exiting. Use pose-to-pose for predictable, controllable list animations.
Stagger item entrance: first item leads, others follow (30-50ms delay). Content within items lags behind item container.
Item enter: ease-out. Item exit: ease-in. Reorder: ease-in-out. Stagger easing should feel like a wave, not mechanical.
Reordering items should follow curved paths, not straight lines. Adds personality and organic feel to grid shuffles.
While item moves (primary), placeholder appears (secondary), other items shift (tertiary). Coordinate the ensemble.
Dramatic filter transitions can scale items to 0 before removing. New items can overshoot position slightly. Make sorting visible.
Maintain consistent spacing during animations. Grid gaps should stay uniform. Item proportions should remain stable during transforms.
Smooth list animations feel premium. Jarring reorders feel broken. Staggered entrances guide attention naturally. Users notice quality.
.list-item {
animation: itemEnter 250ms ease-out backwards;
}
.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }
/* continue pattern */
@keyframes itemEnter {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.grid-item {
transition: transform 300ms ease-in-out,
opacity 200ms ease-out;
}
transform: translate, scaleopacity: enter/exitanimation-delay: staggergrid-template: layout shiftsorder: reordering