Build: The Filterable Gallery

The whole file after this topic. If yours differs, you can copy this one and carry on.

// flip.js: First, Last, Invert, Play (Phase 10).
// flip(elements, change, options) measures where the elements are, runs change(), measures again, and plays each
// element that moved from its old place to its new one. Only transform animates, so it stays on the compositor.
import { motionAllowed } from "./prefers-reduced.js";

const running = new WeakMap(); // element -> its FLIP animation, so a newer flip can replace it

function measure(el, scroller) {
  const box = el.getBoundingClientRect(); // includes a transform in flight: the true on-screen box
  const s = scroller ? scroller.getBoundingClientRect() : { left: 0, top: 0 };
  return {
    box,
    x: box.left - s.left + (scroller ? scroller.scrollLeft : 0), // measured from the scroller's content, so a scroll is not a move
    y: box.top - s.top + (scroller ? scroller.scrollTop : 0),
    shown: el.getClientRects().length > 0, // false for display: none
    opacity: Number(getComputedStyle(el).opacity),
  };
}

// An element that left has no box any more, so a copy of it fades out where it was.
function fadeOutCopy(el, before, duration, move) {
  const copy = el.cloneNode(true);
  copy.hidden = false;
  copy.removeAttribute("id");
  copy.setAttribute("aria-hidden", "true");
  copy.inert = true;
  Object.assign(copy.style, {
    position: "fixed", margin: "0", zIndex: "5", pointerEvents: "none", transition: "none",
    left: before.box.left + "px", top: before.box.top + "px", width: before.box.width + "px", height: before.box.height + "px",
  });
  document.body.append(copy);
  const frames = [{ opacity: before.opacity }, { opacity: 0, transform: move ? "scale(0.92)" : "none" }];
  const fade = copy.animate(frames, { duration: move ? Math.min(duration, 200) : 120, easing: "ease-out", fill: "forwards" });
  fade.finished.then(() => copy.remove(), () => copy.remove());
  return fade;
}

export function flip(elements, change, { duration = 320, easing = "cubic-bezier(0.22, 1, 0.36, 1)", scroller = null } = {}) {
  const items = [...elements];
  const first = items.map((el) => measure(el, scroller)); // First: read everything before writing anything
  for (const el of items) running.get(el)?.cancel(); // forget the old transform, so Last is measured clean
  change(); // Last: the DOM changes, no animation yet
  const move = motionAllowed(); // reduced motion: nothing travels
  const plays = [];
  items.forEach((el, i) => {
    const a = first[i];
    const b = measure(el, scroller);
    if (a.shown && b.shown) {
      const dx = a.x - b.x;
      const dy = a.y - b.y;
      if (!move || (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5)) return; // did not move: no animation, no layer
      const play = el.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }], { duration, easing }); // Invert, Play
      running.set(el, play);
      play.finished.then(() => running.get(el) === play && running.delete(el), () => {});
      plays.push(play);
    } else if (a.shown && !b.shown) {
      plays.push(fadeOutCopy(el, a, duration, move)); // left
    } // arrived (not shown before): the CSS @starting-style does the entrance
  });
  return Promise.allSettled(plays.map((p) => p.finished)).then(() => {});
}