Cards Containers
This breaks down Disney's 12 animation principles for card and container UI, which sounds academic but is actually practical. You get specific timing values (200-250ms for hover lifts), concrete CSS patterns with stagger delays, and rules like keeping squash and stretch under 3% scale change. The anticipation technique of briefly scaling down to 0.98 before expanding is the kind of detail that separates fluid interfaces from janky ones. It's opinionated about easing curves and insists cards follow arcs during drag operations, not straight lines. If you're building dashboards, galleries, or anything with interactive tiles and want them to feel physical instead of flat, the timing charts alone are worth having on hand.
- skills.sh installs
- 557
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill cards-containers --agent claude-codeInstalls into .claude/skills of the current project.
Files
Card & Container Animation Principles
Apply Disney's 12 principles to cards and containers for engaging, dimensional interfaces.
Principles Applied to Cards
1. Squash & Stretch
Cards can subtly compress on drag-start and stretch when released. Keep it minimal: 2-3% scale change maximum.
2. Anticipation
Before expanding a card to detail view, briefly scale down (0.98) for 50ms, then expand. Prepares user for the transformation.
3. Staging
The card being interacted with should lift above others via z-index and shadow. Dim or blur background cards to focus attention.
4. Straight Ahead & Pose to Pose
Define clear states: resting, hovered, selected, expanded. Pose-to-pose transitions between these defined keyframes.
5. Follow Through & Overlapping Action
Card content (text, images, icons) should lag slightly behind card movement. Stagger by 20-40ms for natural feel.
6. Ease In & Ease Out
Card lifts use ease-out, card settles use ease-in-out. Never linear. cubic-bezier(0.25, 0.1, 0.25, 1) for smooth lifts.
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- Orchestrated Sequences557
- Universal Emotion556
- Loaders Spinners554
- Forms Inputs553
- Secondary Action Mastery551
- Social Media551
- Attention Management550
- Brand Strategist548
- Exit Animations547
- Exaggerated Clarity546
- Accordions Dropdowns545
- Straight Ahead Pose Mastery543
- Timing Calibration543
- Continuous Loops542
- Lists Grids542
- Urgency Action542
- User Feedback Clarity542
- Power Confidence540
- Feedback Indicators539
- Universal Patterns539
- Continuous Infinite535
- Emotional Disconnect534
- Problem Diagnosis534
- Responsive Adaptive534
Recommended
More Design & UI/UX
universal-emotiondylantarre/animation-principlesUse when you need to achieve any emotional outcome through animation—provides a framework for mapping Disney principles to any target emotion.556skills.sh installsexit-animationsdylantarre/animation-principlesUse when elements need to leave the screen - closing modals, dismissing notifications, removing items, page transitions out, or any "leaving view" animation.547skills.sh installsaccordions-dropdownsdylantarre/animation-principlesUse when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions545skills.sh installstiming-calibrationdylantarre/animation-principlesUse when animation speed feels wrong—too fast, too slow, or inconsistent543skills.sh installslists-gridsdylantarre/animation-principlesUse when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states542skills.sh installsurgency-actiondylantarre/animation-principlesUse when creating animations that prompt immediate user action, highlight time-sensitivity, or drive conversions.542skills.sh installs