e-commerce-retail

SKILL.md

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.