ReddRadar
Agent skill
e-commerce-retail
Use when designing animations for shopping apps, product catalogs, checkout flows, or retail experiences
Install this agent skill to your Project
npx add-skill https://github.com/dylantarre/animation-principles/tree/main/skills/08-by-industry/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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
dylantarre/animation-principles
icons-badges
Use when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback
dylantarre/animation-principles
navigation-menus
Use when animating navigation bars, menus, sidebars, or wayfinding elements to create smooth, intuitive transitions
dylantarre/animation-principles
lists-grids
Use when animating lists, grids, tables, or collections of items to create smooth ordering, filtering, and loading states
dylantarre/animation-principles
loaders-spinners
Use when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status
dylantarre/animation-principles
accordions-dropdowns
Use when animating accordions, collapsibles, dropdowns, or expand/collapse elements for smooth reveal transitions
dylantarre/animation-principles
universal-elements
Use when animating any UI element not covered by specific skills, or when applying general animation principles across multiple element types
Didn't find tool you were looking for?