playbooks

home / skills / dylantarre / animation-principles / e-commerce-retail

e-commerce-retail skill

/skills/08-by-industry/e-commerce-retail

This skill helps designers apply Disney's 12 animation principles to e-commerce experiences, enhancing premium feel, trust, and conversion across catalogs and

npx playbooks add skill dylantarre/animation-principles --skill e-commerce-retail

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
3.1 KB
---
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.

Overview

This skill applies Disney’s 12 animation principles to e-commerce and retail interfaces to make shopping feel premium, trustworthy, and conversion-focused. It provides concrete animation patterns, timing guidance, and interaction rules for product catalogs, checkout flows, and micro-interactions. Use it to design motion that supports buying decisions without getting in the way.

How this skill works

The skill inspects common retail touchpoints—add-to-cart, product hero, checkout steps, filters, and loading states—and maps each to one or more animation principles (e.g., anticipation, timing, appeal). It recommends durations, easings, and visual behaviors (arcs, squash & stretch, slow in/out) and suggests where secondary actions or micro-delights can reinforce trust and momentum. The result is a practical set of patterns you can apply directly to UI prototypes and production animations.

When to use it

  • Designing product listings, carousels, and hero images for online stores
  • Crafting add-to-cart, wishlist, and checkout transitions to improve conversion
  • Defining motion guidelines for brand-specific retail experiences
  • Prototyping micro-interactions that communicate status and trust
  • Optimizing mobile shopping flows for perceived speed and clarity

Best practices

  • Prioritize speed: keep critical actions snappy (150–200ms) to avoid blocking purchase flow
  • Use subtle anticipation and easing to communicate intent without distracting
  • Reserve dramatic exaggeration for urgent signals (flash sales, low stock)
  • Apply consistent iconography and aspect ratios to preserve visual solidity
  • Layer secondary actions (confetti, sparkles) only after primary confirmation

Example use cases

  • A product card where the thumbnail arcs into the cart with a 200ms ease-out and quantity badge stretches on rapid increments
  • Checkout progress that uses slow in/slow out for 300–400ms transitions to convey confidence between steps
  • Quick-view modal that eases open at 250ms while background dims to stage the product hero
  • Low-stock alert using an exaggerated shake and bold pulse to drive urgency without breaking trust
  • Mobile image carousel with smooth deceleration and preserved aspect ratios for premium product imagery

FAQ

Will animations slow down conversions?

When designed to be efficient, animations increase clarity and confidence; keep purchase-critical motions under recommended timings so they enhance rather than hinder conversion.

How do I match animation style to brand tone?

Map brand personality to motion: premium brands favor smooth, restrained easing; playful brands allow bouncier squash & stretch and more visible secondary actions.