E-Commerce & Retail Animation Principles

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

Key Principle