Search skills.../

E Commerce Retail | Skills Pool

Skill File

E Commerce Retail

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

dylantarre33 starsDec 30, 2025

Occupation
Categories: E-commerce Development

Skill Content

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

: Center product with dimmed background

Related Skills

Quick Install

E Commerce Retail

npx skills add dylantarre/animation-principles

Download Skill Open repository

Author: dylantarre
stars: 33
Updated: Dec 30, 2025
Occupation

On this page

01E-Commerce & Retail Animation Principles

Product Hero

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.

02

The 12 Principles Applied

031. Squash & Stretch

042. Anticipation

064. Straight Ahead & Pose to Pose

075. Follow Through & Overlapping Action

086. Slow In & Slow Out

108. Secondary Action

Special Effects Artists and Animators

Ordercli

Foodora-only CLI for checking past orders and active order status (Deliveroo WIP).

E-commerce Development

Paypal Integration

Integrate PayPal payment processing with support for express checkout, subscriptions, and refund management. Use when implementing PayPal payments, processing online transactions, or building e-commerce checkout flows.

E-commerce Development

Stripe Integration

Implement Stripe payment processing for robust, PCI-compliant payment flows including checkout, subscriptions, and webhooks. Use when integrating Stripe payments, building subscription systems, or implementing secure checkout flows.

Billing Automation

Build automated billing systems for recurring payments, invoicing, subscription lifecycle, and dunning management. Use when implementing subscription billing, automating invoicing, or managing recurring payment systems.

E-commerce Development

Odoo Ecommerce Configurator

Expert guide for Odoo eCommerce and Website: product catalog, payment providers, shipping methods, SEO, and order-to-fulfillment workflow.

E-commerce Development

Odoo Shopify Integration

Connect Odoo with Shopify: sync products, inventory, orders, and customers using the Shopify API and Odoo's external API or connector modules.

Special Effects Artists and Animators