E Commerce Retail
- 467 installs
- 68 repo stars
- Updated December 30, 2025
- dylantarre/animation-principles
e-commerce-retail is a Design & UI/UX skill that applies Disney's 12 animation principles to retail motion patterns—product reveals, cart feedback, and promotional banners—for developers building shopping apps that need
About
e-commerce-retail is a Design & UI/UX skill from dylantarre/animation-principles that maps Disney's 12 principles of animation onto shopping experiences. The skill prescribes motion for add-to-cart squash and stretch, buy-button anticipation, sale-tag staging, and checkout feedback so animations increase clarity and conversion without distracting shoppers. Developers reach for e-commerce-retail when designing animations for product catalogs, cart flows, promotional banners, or retail mobile apps where motion must feel premium and trustworthy. Each principle includes concrete UI examples—quantity badge stretch, image zoom anticipation, and sale pulse patterns—ready to translate into CSS, React Spring, or Framer Motion implementations.
- Product reveal motion
- Cart and checkout feedback
- Promo banner choreography
- Conversion-safe pacing
- Retail UX motion heuristics
E Commerce Retail by the numbers
- 467 all-time installs (skills.sh)
- Ranked #610 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/dylantarre/animation-principles --skill e-commerce-retailAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 467 |
|---|---|
| repo stars | ★ 68 |
| Last updated | December 30, 2025 |
| Repository | dylantarre/animation-principles ↗ |
How do you animate e-commerce checkout and cart interactions?
Apply retail-specific motion patterns for product reveals, cart feedback, and promotional banners that increase clarity and conversion without distracting shoppers.
Who is it for?
Frontend developers and designers building shopping apps, product catalogs, or checkout flows who need principle-driven retail motion guidance.
Skip if: Backend-only engineers or projects with no UI animation requirements such as headless APIs or data pipelines.
When should I use this skill?
Designing animations for shopping apps, product catalogs, checkout flows, or retail promotional banners that need conversion-safe motion.
What you get
Retail motion specifications, principle-mapped UI animation patterns, and conversion-focused interaction designs.
- retail motion specifications
- principle-mapped UI patterns
By the numbers
- Covers Disney's 12 animation principles applied to retail UI
Files
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.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
What animation patterns does e-commerce-retail cover?
e-commerce-retail applies Disney's 12 principles to retail UI motion including add-to-cart squash, quantity badge stretch, buy-button anticipation, image zoom staging, and sale-tag pulse patterns for shopping apps and checkout flows.
Is e-commerce-retail only for mobile apps?
e-commerce-retail targets shopping apps, product catalogs, and checkout flows on web and mobile. The motion principles translate to CSS, React Spring, Framer Motion, or native animation libraries.