Cart Drawer Open
The cart panel travels in from the edge and its line items arrive a beat behind it.
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 { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Cart Drawer Open
*
* The cart travels in from the edge and its contents arrive a beat
* behind it — panel first, then line items a hair apart, then theAbout this pattern
The panel that opens the moment something is added. The delay between the panel landing and its contents arriving is the whole trick: contents that ride in with the panel look painted onto it, contents that follow it look like they were always inside. Each line is delayed from one shared start rather than chained to the line before it, so a dropped frame cannot stretch the gaps into a queue, and the summary follows last. The panel is opaque over its scrim and springs at a damping ratio that lets it arrive once and stop.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Cart
Adding an item opens a side cart whose lines settle in just after the panel lands.
Related patterns
- Cart Item RemoveA removed line collapses its own height and gap while the survivors travel up and the total falls.
- Invoice Line ExpandA charge unfolds into the lines that make it up, with its own amount pinned in place.
- Product CompareAdding a product widens a slot while the column's specs ride in from the right.