FLIP layout-animation techniques (v2)

// prepare first
const first = [];
for (const n of stage.children) {
	first.push(n.getBoundingClientRect());
}

// mutate DOM (reverse order)
makeGrid(true);

// read last & compute inversions inside loop (= flush each time)
for (let i = 0; i < stage.children.length; i++) {
	const node = stage.children[i];
	const last = node.getBoundingClientRect(); // layout thrash
	const inv = {
		dx: first[i].left - last.left,
		dy: first[i].top - last.top,
		sx: first[i].width / last.width,
		sy: first[i].height / last.height,
	};
	node.style.transform = `translate(${inv.dx}px,${inv.dy}px) scale(${inv.sx},${inv.sy})`;
}

const first = readAllRects(); // single layout read

makeGrid(true);               // mutate

const last  = readAllRects();  // single layout read (forced reflow)
const frames= computeFrames(first,last);
writeAllTransforms(frames);    // all writes (no extra reflow)

const els = stage.children;
const first = new Array(els.length);
for (let i = 0; i < els.length; i++) {
	first[i] = rectCache.get(els[i]) || els[i].getBoundingClientRect();
}

makeGrid(true);

const last = readAllRects();
const frames = new Array(els.length);

for (let i = 0; i < els.length; i++) {
	if (
		first[i].left === last[i].left &&
		first[i].top === last[i].top &&
		first[i].width === last[i].width &&
		first[i].height === last[i].height
	) {
		// unchanged – reuse matrix
		frames[i] = matCache.get(els[i]) || { dx: 0, dy: 0, sx: 1, sy: 1 };
	} else {
		const inv = {
			dx: first[i].left - last[i].left,
			dy: first[i].top - last[i].top,
			sx: first[i].width / last[i].width,
			sy: first[i].height / last[i].height,
		};
		frames[i] = inv;
		matCache.set(els[i], inv);
		rectCache.set(els[i], last[i]);
	}
}
writeAllTransforms(frames);

const state = Flip.getState(".card");
makeGrid(true);
Flip.from(state, {duration:0});   // duration 0: measure only

/* 1️⃣ capture first (cards in “narrow” CQ state) */
const state = Flip.getState(".card");

/* 2️⃣ trigger *both* a DOM re-order and a container query flip */
makeGrid(true);                        // same reorder as other tests
stage._wide = !stage._wide;            // toggle width each run
stage.style.width = stage._wide ? "600px" : "400px";   // crosses the 500 px break

/* 3️⃣ play FLIP prep only (duration 0 = measure cost) */
Flip.from(state,{ duration:0 });

const first = Array.from(stage.children, rectTB);

makeGrid(true);                 // DOM change

const last  = Array.from(stage.children, rectTB);
const frames= computeFrames(first, last);
writeAllTransforms(frames);     // animation prep

/* ① read first positions */
const first = getAllRectsViaIO(); // single cached read

/* ② mutate DOM (order + maybe CQ break-point) */
makeGrid(true); // reorder like other tests
isWide = !isWide; // toggle width every run
stage.style.width = isWide ? "600px" : "400px"; // crosses 500 px CQ

// guard – if CQ break-point did NOT change we can early-out
const cqNowWide = stage.offsetWidth >= 500; // cheap style-only read
if (cqNowWide === isWide) {
  // break-point flipped
  /* ③ read last positions via IO  */
  const last = getAllRectsViaIO();
  /* ④ compute & write inversions */
  const frames = computeFrames(first, last);
  writeAllTransforms(frames); // single batched write
}

// ① read first batch (already in object pool)
const first = getAllRectsViaIO();

// ② mutate DOM order *and* toggle CQ width
makeGrid(true);
isWide = !isWide;
stage.style.width = isWide ? '600px' : '400px';

// ③ read second batch
const last = getAllRectsViaIO();

// (finish – no FLIP, we just collected data)

//   1 · first rects (IO, no reflow)
const first = getAllRectsViaIO();

//   2 · mutate DOM and (maybe) CQ flip
makeGrid(true);
isWide = !isWide;
stage.style.width = isWide ? "600px" : "400px";

//   3 · guard: skip if CQ state unchanged
const cqWideNow = stage.offsetWidth >= 500;
if (cqWideNow === isWide){

  //   4 · last rects
  const last   = getAllRectsViaIO();

  //   5 · compute & WRITE using pooled strings
  const frames = computeFrames(first,last);
  const els    = stage.children;

  for (let i=0;i<els.length;i++){
    const f = frames[i];
    els[i].style.transform = pooledTransform(f.dx,f.dy,f.sx,f.sy);
  }
}

/* 1 · first rects (tick-memo) */
const first = Array.from(stage.children, rectTB);

/* 2 · DOM reorder + width toggle (+ IO guard still applies) */
makeGrid(true);
isWide = !isWide;
stage.style.width = isWide ? "600px" : "400px";
const cqWideNow = stage.offsetWidth >= 500;
if (cqWideNow === isWide) {

  /* 3 · last rects (tick-memo again) */
  const last   = Array.from(stage.children, rectTB);

  /* 4 · compute frames */
  const frames = computeFrames(first, last);

  /* 5 · WRITE via attributeStyleMap.set() with a pooled CSSStyleValue */
  const els = stage.children;
  for (let i = 0; i < els.length; i++) {
    const f  = frames[i];
    const k  = f.dx + "|" + f.dy + "|" + f.sx + "|" + f.sy;

    // pool returns a *single* CSSStyleValue object per key
    let css = txPool[k];
    if (!css) {
      // build once, then cache
      css = new CSSTransformValue([
        new CSSTranslate(CSS.px(f.dx), CSS.px(f.dy)),
        new CSSScale(f.sx, f.sy),
      ]);
      txPool[k] = css;
    }
    els[i].attributeStyleMap.set("transform", css);
  }
}

/***** drag flag *****/
let isDragging = false;
let lastRects  = null;          // cached across rAF’s within drag

/***** pointer handlers *****/
stage.addEventListener("pointerdown", () => {
  isDragging = true;
  lastRects  = null;            // force fresh read on the first tick
});
window.addEventListener("pointerup", () => {
  isDragging = false;
  lastRects  = null;
});

/***** rAF-loop benchmark (drag variant) *****/
function test13() {
  if (!isDragging) return;      // run only while dragging

  /* 1 · read first */
  const first = lastRects || getAllRectsViaIO(); // IO only once per drag

  /* 2 · mutate DOM (e.g. reorder based on pointer) */
  makeGrid(true);               // placeholder for your live reorder

  /* 3 · read last (forced) */
  const last  = getAllRectsViaIO();

  /* 4 · compute + write (string pool is fine here) */
  const frames = computeFrames(first, last);
  writeAllTransforms(frames);

  /* 5 · cache for next rAF */
  lastRects = last;
  requestAnimationFrame(test13);
}
requestAnimationFrame(test13);