fly to cart

'🛒 Fly-to-Cart Animation — Vanilla JavaScript

A polished "Add to Cart" animation for e-commerce sites and product showcases. When a customer clicks Add to Cart, the product image smoothly flies from the card into the cart icon — the kind of subtle, satisfying micro-interaction that makes a store feel modern and responsive.

Built entirely with plain HTML, CSS, and JavaScript — no frameworks, no libraries, no build tools. Just three files you can drop into any project.

✨ Features

• Fly-to-cart animation — product image clones and animates smoothly into the cart icon on click
• Live cart counter — badge updates automatically with each item added
• Product carousel — horizontal scrolling card layout with left/right arrow navigation
• Fully responsive — adapts to mobile screens out of the box
• Zero dependencies — no jQuery, no React, no npm install — just static files
• Easy theming — colors controlled through CSS custom properties (--primary, --secondary, --bg) at the top of the stylesheet, so you can reskin it in seconds

📦 What's included

• index.html — page structure with 8 sample product cards
• style.css — all styling, animation keyframes, and responsive rules
• script.js — carousel logic and the fly-to-cart animation logic
• images/ — folder for your product photos
• README.md — setup instructions

🔧 How it works

1. Drop the files into your project (or open index.html directly to preview)
2. Swap in your own product images and details in index.html
3. Adjust the color variables in style.css to match your brand
4. That's it — the animation and cart counter work automatically on any element with the add-to-cart class

💡 Use cases

Great for online stores, product landing pages, portfolio pieces, or as a starting point to integrate into a larger e-commerce build (Shopify custom themes, WooCommerce, or any static/JS-based storefront).