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.
- skills.sh installs
- 620
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill carousels-sliders --agent claude-codeInstalls into .claude/skills of the current project.
Files
Carousel & Slider Animation Principles
Apply Disney's 12 principles to carousels and sliders for smooth, intuitive navigation.
Principles Applied to Carousels
1. Squash & Stretch
Slides can slightly compress in scroll direction during fast swipes. Expands perception of speed and momentum.
2. Anticipation
Before slide change, current slide can shift 5-10px in direction of navigation. Button can depress before triggering.
3. Staging
Current/active slide should be prominently displayed: larger, centered, more opaque. Adjacent slides can be dimmed or scaled down.
4. Straight Ahead & Pose to Pose
Use pose-to-pose: define exact positions for each slide. Snap points should be clear and predictable.
5. Follow Through & Overlapping Action
After snap, slide can overshoot slightly and settle back. Content within slide (text, buttons) lags behind container movement.
6. Ease In & Ease Out
Swipe release: ease-out (momentum slowdown). Button navigation: ease-in-out. cubic-bezier(0.25, 0.1, 0.25, 1) for smooth slides.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Timing Mastery620
- Transition Sequences619
- Education Learning618
- Rive Animations618
- Travel Hospitality611
- Loading States610
- Dramatic 2000ms Plus609
- Notifications Toasts606
- Frontend Developer605
- Navigation Menus601
- Buttons Ctas598
- Figma Prototyping597
- Brand Marketing594
- Solid Drawing Mastery593
- Animator Traditional591
- Motion One589
- Naturalistic Motion589
- Attention Direction586
- Squash Stretch Mastery583
- Fintech Banking581
- Icons Badges581
- Staging Mastery581
- Gesture Responses579
- Arc Mastery578
Recommended
More Design & UI/UX
transition-sequencesdylantarre/animation-principlesUse when orchestrating multi-step animations - page transitions, onboarding flows, wizard steps, complex reveals, or any choreographed animation sequence.619skills.sh installsloading-statesdylantarre/animation-principlesUse when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working.610skills.sh installsdramatic-2000ms-plusdylantarre/animation-principlesUse when building extended animation sequences over 2000ms - cinematic intros, story sequences, premium experiences where animation IS the product609skills.sh installsnavigation-menusdylantarre/animation-principlesUse when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions601skills.sh installs
pixel-artomer-metin/skills-for-antigravityDeep pixel art expertise covering fundamentals, limited palettes, dithering patterns, subpixel animation, tile design, retro hardware constraints, and HD-2D hyb594skills.sh installs
latex-postersdavila7/claude-code-templatesCreate professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientifi592skills.sh installs