Source

// Moves in a list glide instead of jumping: note where each item is before a change, then animate
// every item from its old place to its new one. New items fade in. Off when the person asks for less motion.
import { useRef, type RefObject } from "react";

const calm = matchMedia("(prefers-reduced-motion: reduce)");
const EASE = "cubic-bezier(.2, .8, .2, 1)";

/** Items in the list carry `data-flip` with a stable key. Call `before()` just before the change and `play()` after it renders. */
export function useFlip(list: RefObject<HTMLElement>) {
  const places = useRef<Map<string, DOMRect> | null>(null);
  const items = () => Array.from(list.current?.children || []) as HTMLElement[];
  return {
    before() {
      if (calm.matches || !list.current) return;
      places.current = new Map(items().map((el) => [el.dataset.flip!, el.getBoundingClientRect()]));
    },
    play() {
      const old = places.current;
      places.current = null;
      if (!old) return;
      for (const el of items()) {
        const was = old.get(el.dataset.flip!);
        if (!was) {
          el.animate([{ opacity: 0, transform: "scale(.96)" }, { opacity: 1, transform: "none" }], { duration: 200, easing: EASE });
          continue;
        }
        const now = el.getBoundingClientRect();
        const dx = was.left - now.left;
        const dy = was.top - now.top;
        if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
          el.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }], { duration: 220, easing: EASE });
        }
      }
    },
  };
}