cards-containers
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
More from dylantarre/animation-principles
mobile-touch
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
1.6Kvideo-motion-graphics
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
624motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
558micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
441saas-productivity
Use when designing animations for business tools, project management, collaboration software, or productivity apps
293game-designer
Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.
287