Carousels Sliders

This applies Disney's 12 animation principles to carousel and slider implementations, which sounds academic but actually translates to practical timing values and CSS patterns. You get specific transition durations (300-500ms for slides, 150ms for pagination dots), easing functions like cubic-bezier(0.25, 0.1, 0.25, 1), and techniques like scaling inactive slides to 0.9 or adding slight overshoot on snap. The approach treats UI motion as character animation, which either resonates with you or feels overwrought. Most useful if you're building carousels from scratch and want them to feel native rather than janky. Includes both custom transition code and modern CSS scroll-snap implementations.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill carousels-sliders --agent claude-code