Cart Item Remove
A removed line collapses its own height and gap while the survivors travel up and the total falls.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Cart Item Remove
*
* A removed line collapses its own height and takes the gap with it, the
* lines beneath travel up into the space, and the total rolls down toAbout this pattern
Taking something out of a bag is an edit, not an event. The leaving line collapses its height and its own bottom gap together, so the list closes flush instead of leaving a seam; the lines beneath travel up on a position-only layout animation, which moves them without stretching the type inside; and the subtotal rolls downward at a constant size. The collapse is an eased tween rather than a spring — a closing gap that springs makes the list look like it is breathing. An empty line waits behind the list so the last removal closes onto a sentence rather than onto nothing.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Cart
A removed bag line closes its space and the summary restates itself underneath.
Related patterns
- Cart Drawer OpenThe cart panel travels in from the edge and its line items arrive a beat behind it.
- Shipping Option SelectOne plate travels to the chosen speed while the arrival estimate restates itself and the total follows.
- Cart Quantity StepperStepping the quantity rolls the count and both totals in the direction of the change.