Animating top, left, width, or height forces the browser to recalculate layout on every frame. FLIP does the layout work once and animates only transform, which the browser can run on the compositor.

The four steps are:

First: read the element's position and size with getBoundingClientRect().
Last: apply the change, such as reordering a list or expanding a card. Read the rect again.
Invert: compute the difference and apply a transform that moves the element back to where it was.
Play: animate that transform to none, so the element glides into its real position.

```js function flip(el, change) { const first = el.getBoundingClientRect(); change(); // layout changes instantly const last = el.getBoundingClientRect();

const dx = first.left - last.left; const dy = first.top - last.top; const sx = first.width / last.width; const sy = first.height / last.height;

el.animate( [ { transformOrigin: "top left", transform: translate(${dx}px, ${dy}px) scale(${sx}, ${sy}) }, { transformOrigin: "top left", transform: "none" }, ], { duration: 300, easing: "cubic-bezier(0.2, 0, 0, 1)" } ); } ```

The Invert and the first frame of Play happen before the browser paints. So the user never sees the element in its new spot without the offset. The cost of measuring is paid up front, in the short gap after the user's input. Scaling distorts children such as text, so expanding cards often counter-scale the inner content or crossfade it. Motion's layout prop and the View Transitions API apply the same idea for you.