E Commerce Retail

---
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.