Create Smooth Add To Shopping Cart Animations with CartFlow.js

CartFlow is a tiny JavaScript library that creates smooth ‘Add To Cart’ animations when users add items to their shopping cart. It supports both Node.js and browser environments, and includes features for sound effects and cart animations.

Cart animations provide visual feedback to users during the purchasing process. These animations track the item’s movement from product to cart, confirming the successful addition of items. CartFlow creates these interactions through a lightweight JavaScript implementation that maintains performance across different devices and platforms.

See It In action:

How to use it:

1. For projects using Node.js and bundlers like Webpack, Vite, or Rollup, install CartFlow using npm:

# NPM
$ npm install cartflow

const CartFlow = require('cartflow');

2. To use CartFlow directly in the browser, include the script using a <script> tag:

<script src="CartFlow.js"></script>

3. Add a shopping cart icon to your webpage. This will be the target for the ‘Add To Cart’ animation.

<div class="shopping-cart">
  🛒
</div>

4. Create the buttons that users will click to add items to their cart.

<button class="add-to-cart">
  Add to Cart
</button>

5. Initialize CartFlow with your desired settings:

const myCart = new CartFlow({
  onComplete: (item) => {
    console.log("Successful", item);
  },
  onCartShake: (cart) => {
    console.log("Completed!", cart);
  }
});

6. Customize your ‘Add to Card’ animations with the following options and callbacks:

• cartSelector: Specifies the CSS selector for your shopping cart element
• buttonSelector: Specifies the CSS selector for your “Add to Cart” buttons
• itemSelector: Specifies the CSS selector for the container of the item being added
• imageSelector: Specifies the CSS selector for the image within the item container that will be animated
• animationDuration: Sets the duration of the animation in milliseconds
• easing: Defines the easing function for the animation
• shakeEffect: Enables or disables the cart shake effect
• soundEffect: Sets the URL of a sound effect file or an Audio object to play when an item is added
• onComplete: A callback function that executes after the animation finishes. It receives the animated item element as an argument
• onCartShake: A callback function that executes after the cart shake effect. It receives the cart element as an argument

const myCart = new CartFlow({
    cartSelector: ".shopping-cart",
    buttonSelector: ".add-to-cart",
    itemSelector: ".item",
    imageSelector: "img",
    animationDuration: 1000,
    easing: "ease-in-out",
    shakeEffect: true,
    soundEffect: null,
    onComplete: null,
    onCartShake: null,
});

How It Works:

• Event Delegation: The library listens for click events on add-to-cart buttons through event delegation, reducing memory usage and improving performance.
• Image Animation: When triggered, CartFlow creates a clone of the product image and animates it toward the cart using CSS transitions.
• Cart Effects: After the animation completes, the cart can display a shake effect to confirm the item addition.
• Sound Integration: CartFlow supports audio feedback through the Web Audio API, with error handling for platforms that restrict autoplay.

Changelog:

v2.0.0 (01/25/2025)

• Update