Add to Cart Animation with Mini Cart

• index.html: the demo page and the markup to copy

• assets/style.css: component styles, plain CSS custom properties for colours

• assets/script.js: readable, commented source with an onReady guard

• assets/img/: four placeholder product photos (swap in your own)

• The photo lifts off the card and travels a quadratic curve to the cart icon, shrinking and rounding into it

• The bag squashes on impact and settles; the badge rolls up only once the photo has landed, so the figure never runs ahead

• Rapid adds each fly on their own, and the drawer waits for the last one before it opens

• Quantity stepper per line, the figure rolling up or down with the change, capped at data-max-qty

• Remove slides the row out and collapses its height; focus moves to the neighbouring row

• Subtotal counts from what is on screen to the new value, including on open after an add

• Empty state with a Continue shopping action

• role="dialog" drawer with aria-modal, a polite live region, and a cart button whose label carries the count

1. Add to your <head>:

In your downloadThe working code for this step, in index.html.

2. Add before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

3. Copy the [data-cart] block from index.html into your page.

Every [data-cart] root on the page mounts itself. Everything the script reads is a data- hook, so class names are yours to rename:

The showcase toolbar, the .stage wrapper and the "Living room" header row's text are demo furniture, not part of the component. The two demo-only rules in index.html that start the drawer below the toolbar go with it.

Options

API and events

In your downloadThe working code for this step, in script.js.

cart:add (with detail.id), cart:change, cart:open and cart:close bubble from the root. The cart lives in memory; persist it from cart:change and replay it with add() on load.

• Roles: the drawer is role="dialog" with aria-modal="true" and aria-labelledby on its heading; the cart button has aria-haspopup="dialog", aria-controls and aria-expanded; each stepper is a role="group" labelled with the product name, and every stepper and Remove button carries the product name in its label.
• Announced: "Added Pleated pendant to cart. 3 items in cart.", quantity changes with the new subtotal, removals, and "Your cart is empty". The badge is aria-hidden; the cart button's label ("Cart, 3 items") carries the count instead.
• Remove moves focus to the next row's Remove button, the previous one, or Continue shopping when the cart empties, never to <body>.
• Scroll lock covers <html> and <body> and restores the scroll position on close.
• prefers-reduced-motion: no flight and no squash, the badge and stepper figures cross-fade, the drawer fades instead of sliding, rows leave at once and the subtotal is set directly. Read on every action, so a preference change applies without a reload.

The flight. A fixed-position copy of the card image is placed over the original. One tween runs a progress value from 0 to 1 and a gsap.quickSetter writes x and y from the quadratic Bezier formula each frame, with the control point above both the card and the icon so the path rises before it falls. Scale and borderRadius tween alongside on a later-weighted ease, so the photo shrinks into a dot the size of the icon rather than crossing the page as a thumbnail. The copy is removed on complete.

Counts that wait. Data updates on click, so events and announcements are immediate, but the badge shows the count that has landed. Each number sits in a one-cell grid with overflow: hidden: the new figure enters from below (above when it went down) while the old one leaves, which is the roll. The icon squash is a two-step timeline on the SVG, not the button, so the focus ring never distorts.

Rows that leave cleanly. Remove fades the row's contents sideways, then tweens the row's measured height, padding and border to zero before removing it, so the rows below close the gap rather than jumping. The subtotal tweens from whatever figure is on screen, so a second change mid-count carries on instead of snapping back.

The drawer. GSAP places the panel with xPercent rather than a CSS transform, so the second open behaves like the first. Presence is the hidden attribute, set in onComplete, so an invisible panel never covers the page; the open fades opacity, never autoAlpha, so focus can move in on the same frame.

• --accent is the badge, the checkout button and the focus ring: change it first.
• Drawer width: .cart-drawer { width: min(400px, 100%); }. On phones under 440px it is full width.
• Flight feel: the fly() function in assets/script.js. lift is how high the arc rises, 0.66 the travel time, endScale the size it arrives at.
• Squash: bumpIcon(). Remove back.out(2.6) for a flat settle.
• The photo images are 560px squares; any square image works.

Two themes on one token list: light (the default) and dark.

In your downloadThe working code for this step, in index.html.

Nothing else changes: same markup, same script. The demo's toggle and the ?variant=dark URL parameter only set that attribute.

Tokens, all in the two blocks at the top of assets/style.css: --ground, --ground-2, --raised, --hover, --ink, --ink-2, --ink-3, --line, --line-strong, --accent, --accent-ink, --accent-wash, --scrim, --shadow, --shadow-panel, --shadow-fly, --font, --radius, --radius-sm, --radius-xs. Re-value them for your brand; no selector needs overriding. The body and .stage rules at the top are the demo's page and can go.

• GSAP 3.12+ (core only)
• No build step, no framework