SScale Themedocs
FR

Visual animation when adding to cart with 3 styles: Image, Dot, and Line. Satisfying feedback and engagement.

Fly to Cart

The Fly to Cart animation gives satisfying visual feedback when the customer adds a product to the cart. An animated element "flies" from the add-to-cart button to the cart icon in the header.

Activation

SettingDescriptionDefault
Enable Fly to CartActivates the add-to-cart animationYes

The 3 Styles

SettingOptionsDefault
Animation typeImage / Dot / LineDot

Image

The product image in thumbnail form "flies" from the add-to-cart button position to the cart icon in the header.

  • The image shrinks in size during flight
  • Natural curved trajectory
  • The cart icon bounces on arrival

Ideal for: a premium and engaging experience. The customer clearly sees what they just added.

Dot

A colored dot animates and flies from the button to the cart.

  • Lightweight and fast animation
  • Fewer resources than Image mode
  • Subtle but effective

Ideal for: subtle feedback without distracting the customer. A good performance/UX compromise.

Line

An animated line traces the path from the button to the cart.

  • Smooth tracing effect
  • Modern and minimalist style
  • The cart icon bounces on arrival

Ideal for: a clean and contemporary design.

, Dot (colored dot), Line (traced line))

Behavior

  1. The customer clicks "Add to cart"
  2. The animation triggers immediately (duration: ~1.1 seconds)
  3. The animated element follows a curved trajectory toward the cart icon
  4. The cart icon bounces briefly
  5. The cart counter updates
  6. The Cart Drawer opens (if the "Open on add" setting is enabled)
ℹ️The animation plays in parallel with the cart addition (API request). It does not block the experience. If the drawer is configured to open automatically, it opens after the animation.

Performance

The animation is optimized for performance:

  • Uses only transform and opacity (GPU-accelerated)
  • No DOM reflow
  • The animated element is dynamically created and removed after the animation
  • Short duration (1.1s) to avoid slowing down the shopping flow
CriterionDetail
Animated propertiestransform, opacity
Duration1100ms
Lighthouse impactNegligible
Respects `prefers-reduced-motion`The animation is disabled if the user has requested reduced motion

Configuration in Code

Fly to Cart is configured via a global JavaScript variable injected into the page:

window.flyToCartConfig = {
  enabled: true,
  type: 'dot',  // 'image', 'dot', or 'line'
  duration: 1100
};

The <fly-to-cart> component is a Web Component that listens for add-to-cart events and triggers the appropriate animation.

Use Cases

Fashion boutique (premium)

  • Type: Image
  • The customer sees the garment fly into their cart
  • Memorable and satisfying experience

High-volume store

  • Type: Dot
  • Fast and lightweight animation
  • Does not slow down the rapid buying flow

Minimalist boutique

  • Type: Line
  • Clean design in line with the aesthetic
  • Feedback is present but subtle
💡The Dot type is the best default choice. It works well in all contexts and has the best impact/performance ratio. Reserve the Image type for stores where a premium visual experience is the priority.
⚠️On mobile, the animation is shorter because the distance between the button and the cart icon is reduced. The Image type can feel cluttered on small screens. Test on mobile before choosing.
PreviousUpsellsNextTrust Badges