Framer Motion Core — React Deep Dive

motion.div under the hood: the rAF tween loop

<motion.div animate={{ x: 80 }} /> looks like magic. It isn't. Motion stores the animate target, watches for changes, and on each change kicks off a requestAnimationFrame loop that writes el.style.transform every frame — bypassing React's render cycle entirely. React only re-renders when the target changes; the per-frame writes go straight to the DOM. Below we rebuild that loop by hand: read current value → tween with easeOut → write to style.

Framer Motion API	what it does	what we re-implement here
`<motion.div animate>`	declarative target; library diff-and-tween on prop change	`useEffect([pos])` reads DOM, starts rAF loop
`variants`	named animation states (hidden / visible) switchable by label	a state value (`open`) selects the numeric target
`whileHover` / `whileTap`	gesture targets applied on enter, reverted on leave	`onMouseEnter` / `onMouseLeave` set `style.transform`
`transition: {duration, ease}`	timing of the tween between values	`rafAnimate(from, to, 400, ...)` + `easeOutCubic`

1 · the motion core you write (edit me)

// easeOutCubic — Motion's default "easeOut" is a similar cubic curve.
function easeOut(t) { return 1 - Math.pow(1 - t, 3); }

// rafAnimate: the imperative core that Framer Motion wraps declaratively.
// Reads `from` (current DOM value), tweens to `to` over `duration` ms, calls
// `set(v)` every frame. This is exactly what a motion.div animate prop does internally.
function rafAnimate(from, to, duration, set) {
  var startTime = performance.now();
  function frame(now) {
    var t = Math.min((now - startTime) / duration, 1);
    set(from + (to - from) * easeOut(t));
    if (t < 1) requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}

// === motion.div animate={{ x: pos }} — tween on state change ============
function MotionBox() {
  var posState = React.useState(0);
  var pos = posState[0];
  var setPos = posState[1];
  var boxRef = React.useRef(null);

  // This effect mirrors what motion does when the animate target changes:
  // read current value from DOM, start a rAF tween to the new target.
  React.useEffect(function () {
    var el = boxRef.current;
    if (!el) return;
    var m = (el.style.transform || '').match(/-?\d+\.?\d*/);
    var from = m ? parseFloat(m[0]) : 0;
    rafAnimate(from, pos, 400, function (v) {
      el.style.transform = 'translateX(' + v + 'px)';
    });
  }, [pos]);

  return (
    <div className="p-4 mb-4 bg-[#0d1117] rounded border border-[#30363d]">
      <div className="text-xs text-[#8b949e] mb-2">
        animate x — tween, 400ms easeOut (state-driven)
      </div>
      <div
        data-testid="motionbox"
        ref={boxRef}
        style={{ transform: 'translateX(0px)', width: 64, height: 64 }}
        className="bg-[#61dafb] rounded-lg"
      />
      <div className="mt-3 flex gap-2">
        <button
          data-testid="left"
          className="px-3 py-1 bg-[#30363d] text-[#e6edf3] rounded text-xs"
          onClick={function () { setPos(pos - 80); }}
        >
          ◀ Move Left
        </button>
        <button
          data-testid="right"
          className="px-3 py-1 bg-[#61dafb] text-[#0d1117] rounded text-xs font-bold"
          onClick={function () { setPos(pos + 80); }}
        >
          Move Right ▶
        </button>
      </div>
    </div>
  );
}

// === variants pattern: named states (closed ↔ open) select the target =====
function CollapsePanel() {
  var openState = React.useState(false);
  var open = openState[0];
  var setOpen = openState[1];
  var panelRef = React.useRef(null);

  React.useEffect(function () {
    var el = panelRef.current;
    if (!el) return;
    var currentH = parseFloat(el.style.height || '0') || 0;
    var targetH = open ? el.scrollHeight : 0;
    if (currentH === targetH) return;
    rafAnimate(currentH, targetH, 300, function (v) {
      el.style.height = v + 'px';
    });
  }, [open]);

  return (
    <div className="p-4 mb-4 bg-[#0d1117] rounded border border-[#30363d]">
      <div className="text-xs text-[#8b949e] mb-2">
        variants-inspired: animate height between closed (0) and open (auto)
      </div>
      <button
        data-testid="toggle"
        className="px-3 py-1 bg-[#30363d] text-[#e6edf3] rounded text-xs"
        onClick={function () { setOpen(!open); }}
      >
        {open ? '▲ Close Panel' : '▼ Open Panel'}
      </button>
      <div
        data-testid="panel"
        ref={panelRef}
        style={{ height: 0, overflow: 'hidden' }}
        className="mt-2 bg-[#161b22] rounded border border-[#30363d]"
      >
        <div className="p-3 text-xs text-[#8b949e] leading-relaxed">
          The same rAF loop now drives height. The open / closed labels are
          the variants; the numeric target (0 or scrollHeight) is what gets tweened.
        </div>
      </div>
    </div>
  );
}

// === whileHover / whileTap — gesture-driven targets ======================
function HoverButton() {
  var btnRef = React.useRef(null);
  return (
    <div className="p-4 bg-[#0d1117] rounded border border-[#30363d]">
      <div className="text-xs text-[#8b949e] mb-2">
        whileHover — gesture target applied on enter, reverted on leave
      </div>
      <button
        data-testid="hoverbtn"
        ref={btnRef}
        style={{ transform: 'scale(1)', transition: 'transform 0.15s ease-out' }}
        className="px-4 py-2 bg-[#61dafb] text-[#0d1117] rounded font-bold text-sm"
        onMouseEnter={function () { btnRef.current.style.transform = 'scale(1.15)'; }}
        onMouseLeave={function () { btnRef.current.style.transform = 'scale(1)'; }}
      >
        Hover me
      </button>
    </div>
  );
}

function MotionDemo() {
  return (
    <div className="max-w-xl mx-auto p-5 bg-[#161b22] rounded-xl border border-[#30363d]">
      <h2 className="text-base font-bold text-[#61dafb] mb-3">Mini Motion — rAF from scratch</h2>
      <MotionBox />
      <CollapsePanel />
      <HoverButton />
    </div>
  );
}

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

2 · Babel compiles JSX → element tree

<MotionDemo/> becomes React.createElement(MotionDemo). Clicking a button bumps state → effect runs → rafAnimate starts the rAF loop → el.style is mutated every frame, never triggering a React re-render mid-animation.

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

3 · live React (the motion core, proven)

Click "Move Right" — the box tweens to translateX(80px) over 400ms via rAF. Click "Open Panel" — height tweens from 0 to its content size. Hover the button — it scales up. The gold-check runs this automatically: assert box at 0 → click Move Right → wait for translateX(80px) → click Toggle → wait for panel height to grow.

box transform: — · panel height: —px · gold: moveRight(0→80px) → toggle(open) → assert height grew

Motion API → our re-implementation

motion prop	library behaviour	by-hand equivalent
`initial`	first-frame values before enter animation	initial `style` on the element
`animate`	target to tween to; re-tweens on every change	`useEffect([deps])` → `rafAnimate`
`exit`	tween before unmount (needs `AnimatePresence`)	defer unmount: tween then call remove in `onComplete`
`transition {type:'tween'}`	duration-based easing (the default)	`rafAnimate(from, to, ms, set)` + easing fn
`transition {type:'spring'}`	physics-based (stiffness / damping), no fixed duration	rAF loop with velocity + spring force integration
`variants`	named states; children inherit the active label	state var picks the target object; pass label down as prop
`whileHover / whileTap`	gesture target stacked on top of `animate`	`onMouseEnter / Leave` set `style`
`layout` / `layoutId`	FLIP: measure before/after, invert, play	measure bbox, set transform, rAF to identity