Motion One Spring Card Expand — FLIP Detail View

The "card grows into a detail view" transition is the single most recognizable interaction in modern app design — it is how iOS opens an App Store listing and how Framer Motion's layoutId made its name. It is also the one most people give up on outside React, because doing it properly means measuring live geometry and animating between two layouts that never exist at the same time.

This snippet does it in plain JavaScript with Motion One, a ~4kb library that drives the native Web Animations API and — critically for this effect — ships a real spring() easing function.

Why a spring, not a cubic-bezier

A card growing to five times its size on ease-out looks like a video being scrubbed. It arrives at its destination and stops dead. A spring settles:

spring({ stiffness: 210, damping: 24, mass: 1 })

Those three numbers describe a physical system rather than a curve. stiffness is how hard the spring pulls toward the target, damping is how much energy is bled off each oscillation, and mass is inertia. At damping 24 against stiffness 210 the card overshoots its final size by a hair and settles back — the tiny bit of overshoot is what the eye reads as *weight*. Notably, spring animations have no duration: the physics decides when it is finished, which is why the open and close feel consistent even though they cover different distances.

The placeholder problem

The moment the card becomes position: fixed so it can escape the grid, its slot in the grid vanishes and every sibling card jumps left to fill the gap. That reflow is jarring, and it also breaks the close animation, because the geometry you want to return to no longer exists.

The fix is four lines:

placeholder = document.createElement('div'); placeholder.style.width = first.width + 'px'; ...

An empty div of exactly the card's measured size is inserted into the grid before the card is lifted out of flow. The grid never notices the card left. On close, the placeholder's getBoundingClientRect() is what the animation targets — so the card flies back to wherever its slot ended up, even if the window was resized or the layout reflowed while the detail view was open. That is the detail most implementations miss: they cache the original rect at open time, and a mid-transition resize sends the card back to the wrong place.

Measuring first, animating second

open() follows the FLIP discipline. first = card.getBoundingClientRect() captures the card's real position before anything changes. Those values are immediately written back as explicit top, left, width, and height on the fixed element, so visually nothing moves at the instant the card leaves flow — the user sees no jump. Only then does the animation run from those literal values to the target rect.

targetRect() computes the destination from the viewport rather than hard-coding it: Math.min(560, window.innerWidth - 40) keeps the panel comfortable on desktop and inset on a phone, and the centering math is derived from the same numbers.

What each animation is for

Four properties animate together on the card (top, left, width, height), and three more run alongside on different elements — the backdrop fades, the close button fades in slightly later at delay: 0.1, and the hidden body copy rises with y: [12, 0] at delay: 0.14. Staggering those by a tenth of a second is what makes the transition feel choreographed rather than simultaneous.

Animating layout properties rather than transform is a deliberate trade here. transform: scale() is cheaper, but non-uniform scaling distorts the text inside the card — the classic squashed-headline artifact — and correcting it requires counter-scaling every child. For a single element, animating width and height keeps the type crisp at every frame, and one element's layout cost is not what will slow a page down.

Closing cleanly

animate() returns an object with a finished promise, which is what lets the teardown wait for the spring to actually settle:

anim.finished.then(function () { card.removeAttribute('style'); ... })

Stripping the entire inline style attribute in one call is cleaner than resetting six properties individually, and it guarantees no stale position: fixed survives into the next open. The placeholder is removed in the same callback, so the grid closes its gap exactly as the card lands in it.

Reusing it

The detail copy already lives inside each card and is simply display: none until .is-open — so there is no second template to keep in sync and no fetch to wait for. Escape, backdrop click, and the close button all route through the same close(). Pair it with an expandable card for the in-flow variant, or a modal when the content has no origin element to grow from.