Skip to lesson
Exit
Motion, Interaction & Prototyping1 / 2

1 min lesson

FLIP: animate layout changes cheaply

Explain the order in "FLIP: animate layout changes cheaply", then say how you would verify the result.

Step 1 of 2

FLIP: animate layout changes cheaplyFirst, Last, Invert, Play

FLIP lets you animate a layout change using only compositor properties. You measure the element's First position, apply the Last layout instantly, compute the Invert transform that visually places it back at First, then Play by transitioning that transform to zero.

  1. 1First. Record the element's box with getBoundingClientRect() before the change.
  2. 2Last. Make the DOM change, such as a reorder, resize or reparent, and read the new box.
  3. 3Invert. Set a transform that maps Last back onto First, so it looks unmoved.
  4. 4Play. On the next frame, transition the transform to none. The browser animates the delta on the GPU.
First, Last, Invert, Play in six statements. Scale distorts children, so for text-heavy panels FLIP only the translate, or counter-scale the children.ts
const first = el.getBoundingClientRect();
el.classList.add('expanded');
const last = el.getBoundingClientRect();
const dx = first.left - last.left, dy = first.top - last.top;
const sx = first.width / last.width, 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: 200, easing: 'cubic-bezier(0.2, 0, 0, 1)' });
Learn more

Full explanation

Measuring instead of guessing

Measuring instead of guessingthe performance panel is the source of truth

Record an interaction in the Performance panel. Layout thrash means reading geometry and writing styles in the same loop, so batch reads, then writes.

Signals to read in a profile
Dropped frames
Frames over ~16.7ms: the animation stutters
Recalculate Style / Layout
Per-frame purple bars = layout-triggering animation
Forced reflow warning
A read after a write in the same tick: batch them
Long tasks over 50ms
Main thread blocked; compositor-only motion survives this
Watch out

Perceived latency is not actual latency. A slower operation with an instant skeleton or optimistic state can feel faster than a quicker one that shows nothing until it finishes. Measure frame rate and time-to-first-feedback; users feel the second more.