Animation Orchestration — React Deep Dive

one element → many elements: the three primitives

framer_motion_core animates a single element with a requestAnimationFrame tween. Real UIs need choreography: a list ripples in one-by-one, a dismissed card fades out before it leaves the DOM, a parent flips a label and every child follows. Framer Motion ships three primitives for this — and each is a plain-React mechanism in disguise:

primitive	what it does	the plain-React mechanism (used here)
`variants`	named target objects (`hidden`, `visible`, `exit`) — parent switches the label, children inherit it	a `React.Context` carries the active label + stagger step down the tree
`stagger`	children animate with a sequential delay — a wave, not a flash	each child reads its `index` and sets `transitionDelay = index * step`
`AnimatePresence`	keeps a removed child mounted long enough to play its exit animation	park the id in an "exiting" map, render it with the `exit` target, splice after N ms

The demo below implements all three from scratch — no motion/react import. Items enter with a stagger, the list label flips hidden → visible on mount, and the Remove button parks the row in an exit state for 300ms before the real unmount.

1 · the orchestrator you write (edit me)

var EXIT_MS = 300;          // exit animation duration (ms)
var STAGGER  = 0.08;        // delay between each child's enter (s)

// ── 1. VARIANTS ───────────────────────────────────────────────────────
// Named target objects. The parent switches a string label and every child
// that declares the SAME variant set follows automatically.
var listVariants = {
  hidden:  { opacity: 0 },
  visible: { opacity: 1, transition: { staggerChildren: STAGGER } }
};
var itemVariants = {
  hidden:  { opacity: 0, y: 20 },   // enter origin
  visible: { opacity: 1, y: 0  },   // enter target
  exit:    { opacity: 0, x: -40 }   // unmount target (AnimatePresence)
};

// ── 2. VARIANT PROPAGATION ────────────────────────────────────────────
// A Context carries the active label + stagger step down the tree. This is
// exactly what <motion.ul variants=… initial="hidden" animate="visible">
// leaks to its <motion.li variants=…> children.
var VariantContext = React.createContext({ name: 'visible', stagger: STAGGER });

// turn a variant target into an inline-style object
function styleFrom(v) {
  return {
    opacity: v.opacity != null ? v.opacity : 1,
    transform: 'translate(' + (v.x || 0) + 'px,' + (v.y || 0) + 'px)',
    transition: 'opacity ' + (EXIT_MS / 1000) + 's ease, transform ' + (EXIT_MS / 1000) + 's ease'
  };
}

// one list item — reads the label from context, applies a stagger delay
function MotionItem(props) {
  var ctx = React.useContext(VariantContext);
  var label = props.exiting ? 'exit' : ctx.name;        // exit wins over context
  var target = itemVariants[label] || itemVariants.visible;
  var style = styleFrom(target);
  if (!props.exiting) {
    style.transitionDelay = (props.index * ctx.stagger) + 's';   // STAGGER
  }
  return (
    <li data-testid="item" data-id={props.id}
        style={style}
        className="flex items-center gap-3 p-3 bg-[#0d1117] rounded border border-[#30363d]">
      <span className="flex-1 text-[#e6edf3]">Item #{props.id}</span>
      <button data-testid="remove" data-id={props.id}
              className="text-[#e74c3c] text-sm hover:font-bold"
              onClick={function () { props.onRemove(props.id); }}>
        ✕
      </button>
    </li>
  );
}

// ── 3. ANIMATEPRESENCE ────────────────────────────────────────────────
// React unmounts instantly. To play an exit animation we DEFER the unmount:
// park the removed id in an "exiting" map (it keeps rendering with the
// 'exit' target), then splice it from the list after EXIT_MS.
function OrchestrationDemo() {
  var itemsState = React.useState([1, 2, 3]);
  var items = itemsState[0];
  var setItems = itemsState[1];
  var exState  = React.useState({});
  var exiting  = exState[0];
  var setExiting = exState[1];
  var nextId = React.useRef(4);

  // list-level label: start 'hidden', flip to 'visible' next frame so the
  // enter stagger is visible on mount.
  var labelState = React.useState('hidden');
  var label = labelState[0];
  var setLabel = labelState[1];
  React.useEffect(function () {
    requestAnimationFrame(function () { setLabel('visible'); });
  }, []);

  function addItem() {
    var id = nextId.current++;
    setItems(function (prev) { return prev.concat([id]); });
  }

  function removeItem(id) {
    setExiting(function (prev) {
      var next = Object.assign({}, prev);
      next[id] = true;
      return next;
    });
    setTimeout(function () {
      setItems(function (prev) {
        return prev.filter(function (i) { return i !== id; });
      });
      setExiting(function (prev) {
        var next = Object.assign({}, prev);
        delete next[id];
        return next;
      });
    }, EXIT_MS);
  }

  var list = items.map(function (id, i) {
    return (
      <MotionItem key={id} id={id} index={i}
                  exiting={!!exiting[id]}
                  onRemove={removeItem} />
    );
  });

  return (
    <VariantContext.Provider value={{ name: label, stagger: STAGGER }}>
      <div className="max-w-sm mx-auto p-5 bg-[#161b22] rounded-xl border border-[#30363d]">
        <h2 className="text-lg font-bold text-[#61dafb] mb-3">
          List ({items.length})
        </h2>
        <button data-testid="add"
                className="w-full mb-4 px-4 py-2 bg-[#61dafb] text-[#0d1117] rounded font-bold text-sm hover:opacity-80">
          + Add item
        </button>
        <ul data-testid="list" className="space-y-2">
          {list}
        </ul>
        <p data-testid="summary" className="mt-3 text-xs text-[#8b949e]">
          variants: {label} · stagger: {STAGGER}s · exit: {EXIT_MS}ms
        </p>
      </div>
    </VariantContext.Provider>
  );
}

createRoot(document.getElementById('root')).render(<OrchestrationDemo/>);

2 · Babel compiles JSX → element tree

<VariantContext.Provider> becomes React.createElement(VariantContext.Provider, …). The Context value flows down; each MotionItem reads it via useContext and computes its own delay.

// (hit "compile & render" to see Babel's output)

3 · live React (variants + stagger + exit, proven)

On mount the list label flips hidden → visible and items ripple in with a 0.08s stagger. Click Add to append; click ✕ to remove — the row slides out over 300ms, THEN unmounts. The gold-check automates this: assert 3 → add → assert 4 → remove #1 → wait for exit → assert 3 remain and #1 is gone.

items: — · gold: 3 → +Add → 4 → remove #1 → wait exit → 3 remain, #1 gone

intent → orchestration primitive

intent	primitive	why
parent flips a label, children follow	`variants` + a Context	one switch animates N children — no per-child prop drilling
list ripples in one-by-one	`staggerChildren` / per-index `transitionDelay`	wave effect; each child waits `index * step`
removed element animates out first	`AnimatePresence` / defer unmount	React unmounts instantly; you must hold the node for the exit duration
pause before children start	`delayChildren` (no stagger)	all children wait ONE delay, then animate together
parent finishes before children start	`when: 'beforeChildren'`	strict ordering — parent then children, not overlapping
different timing per variant	`transition` inside each variant target	`visible` can spring, `exit` can tween — independent