From dylantarre-animation-principles
Use when animating carousels, sliders, image galleries, or horizontally scrolling content for smooth navigation
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 carousels and sliders for smooth, intuitive navigation.
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 carousels and sliders for smooth, intuitive navigation.
Slides can slightly compress in scroll direction during fast swipes. Expands perception of speed and momentum.
Before slide change, current slide can shift 5-10px in direction of navigation. Button can depress before triggering.
Current/active slide should be prominently displayed: larger, centered, more opaque. Adjacent slides can be dimmed or scaled down.
Use pose-to-pose: define exact positions for each slide. Snap points should be clear and predictable.
After snap, slide can overshoot slightly and settle back. Content within slide (text, buttons) lags behind container movement.
Swipe release: ease-out (momentum slowdown). Button navigation: ease-in-out. cubic-bezier(0.25, 0.1, 0.25, 1) for smooth slides.
3D carousels should rotate slides along curved paths. Coverflow effects follow arc naturally. Even flat carousels can have subtle Y movement.
While slide moves (primary), pagination updates (secondary), adjacent slides scale/fade (tertiary), progress bar moves (quaternary).
Hero carousels can use more dramatic transitions. Product carousels should be smoother, less distracting. Scale to context.
Maintain consistent slide dimensions. Gaps should stay uniform. Aspect ratios must be preserved during any transforms.
Smooth carousels feel premium. Janky sliders feel cheap. Touch response should feel native. Investment here pays dividends.
.carousel-track {
display: flex;
transition: transform 400ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.carousel-slide {
flex-shrink: 0;
transition: transform 300ms ease-out,
opacity 300ms ease-out;
}
.carousel-slide:not(.active) {
transform: scale(0.9);
opacity: 0.6;
}
.pagination-dot {
transition: transform 150ms ease-out,
background-color 150ms ease-out;
}
.pagination-dot.active {
transform: scale(1.3);
}
/* CSS scroll snap */
.carousel-container {
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.carousel-slide {
scroll-snap-align: center;
}
transform: translateX, scaleopacity: inactive slidesscroll-snap-type: native snappingscroll-behavior: smooth scrollingtransition: slide movements