E Commerce Retail

dylantarre/animation-principles/skills/08-by-industry/e-commerce-retail

by dylantarre83597134ba8fNo license99 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 9 months ago

Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences

Instructions onlyDesign & Creative
AI-generated overview

Applies Disney's 12 animation principles to e-commerce interfaces like carts, catalogs and checkout flows.

What it does
This skill provides guidance for designing motion and animation in shopping apps and retail experiences. It maps each of Disney's 12 animation principles to concrete e-commerce interactions such as add-to-cart, product cards, checkout steps and sale tags. It also supplies a table of industry timing and easing standards for common actions, and a closing principle about keeping motion efficient.
When to use it
Use it when planning or reviewing animations for shopping apps, product catalogs, checkout flows or other retail interfaces. It suits designers and developers who need concrete motion guidance tied to conversion and trust.
Requirements
No tools, packages or credentials are required; it is instructions only and ships no scripts.

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

ActionDurationEasing
Add to Cart200msease-out
Quick View250msease-in-out
Checkout Step350msease-in-out
Cart Update150msease-out
Image Zoom300msease-out

Key Principle

Never let animation slow the path to purchase. Every motion should feel efficient and build buying confidence.

Source and attribution

Source:dylantarre/animation-principlesinskills/08-by-industry/e-commerce-retailat commit8359713

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from dylantarre/animation-principles

Rive Animations

dylantarre

Guides implementing Disney's 12 animation principles in Rive interactive animations via state machines and runtime code.

Design & Creative99updated 9 months ago

Timing Principle Mastery

dylantarre

Guides choosing animation durations and pacing so motion conveys weight, emotion, and rhythm.

Design & Creative99updated 9 months ago

Ux Friction

dylantarre

Diagnoses UI animations that confuse, delay, or frustrate users and suggests fixes.

Design & Creative99updated 9 months ago

User Feedback Clarity

dylantarre

Diagnoses and fixes unclear UI feedback using Disney animation principles, with CSS patterns and a checklist.

Design & Creative99updated 9 months ago

Straight Ahead Pose Mastery

dylantarre

Guides animators on choosing between straight-ahead and pose-to-pose workflows, including hybrid approaches.

Design & Creative99updated 9 months ago

Universal Solutions

dylantarre

Diagnoses animation problems using the 12 Disney principles, with checks, fixes and a troubleshooting checklist.

Design & Creative99updated 9 months ago

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative179Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative179Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative179Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today
E Commerce Retail · skills/08-by-industry/e-commerce-retail Agent Skill | SourceWeft