| name | e-commerce-retail |
| description | Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences |
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
- CTA Hierarchy: Primary actions draw eye first
4. Straight Ahead & Pose to Pose
- Browse Flow: Smooth scroll for catalog browsing (straight ahead)
- Checkout: Defined steps with clear transitions (pose to pose)
- Search Results: Staggered reveal for product grid
5. Follow Through & Overlapping Action
- Product Cards: Image settles before price text
- Cart Drawer: Items slide in, total updates after
- Filters: Tags animate before results refresh
6. Slow In & Slow Out
- Modal Opens: Ease-out for product quick-view
- Image Carousel: Smooth deceleration between slides
- Checkout Transitions: 300-400ms with ease-in-out
7. Arc
- Add to Cart: Product thumbnail arcs toward cart icon
- Wishlist: Heart icon arcs to saved section
- Drag to Compare: Items follow natural curved path
8. Secondary Action
- Purchase Success: Confetti while confirmation loads
- Review Stars: Sparkle while rating saves
- Discount Applied: Price crosses out while new price appears
9. Timing
- Quick Add: 150-200ms for snappy cart additions
- Checkout Steps: 300-400ms for confident transitions
- Loading States: Skeleton screens for perceived speed
10. Exaggeration
- Flash Sales: Urgent countdown with bold pulses
- Low Stock: Warning badge with attention-grabbing shake
- Big Discounts: Strike-through with dramatic reveal
11. Solid Drawing
- Product Images: Maintain aspect ratios during zoom
- 3D Views: Consistent lighting and perspective
- Icons: Uniform weight across cart, search, menu
12. Appeal
- Micro-Delights: Subtle bounce on successful actions
- Brand Personality: Premium = smooth, Playful = bouncy
- Trust Signals: Gentle animations for security badges
Industry Timing Standards
| Action | Duration | Easing |
|---|
| Add to Cart | 200ms | ease-out |
| Quick View | 250ms | ease-in-out |
| Checkout Step | 350ms | ease-in-out |
| Cart Update | 150ms | ease-out |
| Image Zoom | 300ms | ease-out |
Key Principle
Never let animation slow the path to purchase. Every motion should feel efficient and build buying confidence.
