e-commerce-retail
E-Commerce & Retail Animation Principles
Apply Disney's 12 principles to create shopping experiences that feel premium, trustworthy, and encourage conversion.
The 12 Principles Applied
1. Squash & Stretch
- Add to Cart: Button compresses on tap, product thumbnail squishes into cart icon
- Quantity Badges: Numbers stretch when incrementing quickly
- Sale Tags: Pulse with slight stretch to draw attention
2. Anticipation
- Buy Button: Subtle lift before purchase confirmation
- Image Zoom: Brief pause before expanding product image
- Checkout Steps: Progress indicator hints at next section
3. Staging
- Product Hero: Center product with dimmed background
- Price Display: Animate price prominently, discounts secondary
More from dylantarre/animation-principles
mobile-touch
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
1.7Kvideo-motion-graphics
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
626motion-designer
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
559micro-interactions
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
442saas-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