Motion Timing

import { useEffect, useRef, type ReactNode } from "react";

function FadeIn({ children }: { children: ReactNode }) {
  const box = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const element = box.current;
    if (!element || typeof element.animate !== "function") return;
    const style = getComputedStyle(element);
    const duration = toMs(style.getPropertyValue("--motion-duration-base"));
    if (!duration) return;
    const fade = element.animate([{ opacity: 0 }, { opacity: 1 }], { duration, easing: style.getPropertyValue("--motion-ease-out").trim() || "ease-out" });
    return () => fade.cancel();
  }, []);
  return <div ref={box}>{children}</div>;
}

<FadeIn>New items appear here.</FadeIn>

import { useState } from "react";

function GrowingBar({ value }: { value: number }) {
  const [track, setTrack] = useState<HTMLDivElement | null>(null);
  const seen = useSeen(track);
  return (
    <div ref={setTrack} className="h-2 rounded-full bg-track">
      <div
        className="h-full rounded-full bg-primary motion-safe:transition-[width] motion-safe:duration-(--motion-duration-slow) motion-safe:ease-(--motion-ease-out)"
        style={{ width: seen ? `${value}%` : "0%" }}
      />
    </div>
  );
}

<GrowingBar value={64} />

import { useState, useSyncExternalStore } from "react";

function MotionReadout() {
  const [element, setElement] = useState<HTMLParagraphElement | null>(null);
  const base = useSyncExternalStore(
    subscribeToMotion,
    () => (element ? toMs(getComputedStyle(element).getPropertyValue("--motion-duration-base")) : 0),
    () => 0,
  );
  return <p ref={setElement}>{base ? `Moves over ${base} ms` : "Motion is off"}</p>;
}

<MotionReadout />

import { useLayoutEffect, useRef, useState } from "react";

function SaveRow() {
  const [saved, setSaved] = useState(false);
  const [leaving, setLeaving] = useState(false);
  const box = useRef<HTMLDivElement>(null);
  const from = useRef(0);
  useLayoutEffect(() => {
    const element = box.current;
    const old = element?.querySelector("[data-leaving]");
    if (!leaving || !element || !old) return;
    glideHeight(element, from.current, "base", true);
    const fade = fadeSwap(old, element.querySelector("p"));
    if (!fade) return setLeaving(false);
    fade.finished.then(() => setLeaving(false), () => {});
    return () => fade.cancel();
  }, [leaving]);
  return (
    <div ref={box} className="relative">
      {(!saved || leaving) && (
        <button
          data-leaving={saved ? "" : undefined}
          inert={saved}
          className={saved ? "absolute top-0" : undefined}
          onClick={() => {
            from.current = box.current?.offsetHeight ?? 0;
            setSaved(true);
            setLeaving(true);
          }}
        >
          Save changes
        </button>
      )}
      {saved && <p>Saved</p>}
    </div>
  );
}

<SaveRow />

import { useRef, useState } from "react";

function ShowLess({ items }: { items: string[] }) {
  const [open, setOpen] = useState(false);
  const list = useRef<HTMLDivElement>(null);
  return (
    <div ref={list}>
      <ul>
        {(open ? items : items.slice(0, 3)).map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button
        onClick={(event) => {
          if (open && list.current) holdInView(event.currentTarget, list.current);
          setOpen(!open);
        }}
      >
        {open ? "Show less" : "Show more"}
      </button>
    </div>
  );
}

<ShowLess items={["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]} />