CSS Animations in React — FLIP Technique

state-driven transitions → FLIP: animating position changes

React mutates the DOM; the browser paints. There is no animation layer in React itself — you opt into smoothness with CSS. The simple case: toggle a class/style on a state change and transition: background .3s fills the in-between frames. But when an element changes position (a list reorders, a card grows), CSS transitions are blind to it — React re-renders and the box just snaps to its new slot. FLIP fixes that by turning a position change into a transform, which the GPU animates cheaply.

FLIP step	what you do	code
First	record the element's old box before the change	`old = el.getBoundingClientRect()`
Last	let React move the DOM to its new position (state update + re-render)	`setItems(reordered)`
Invert	compute `dy = old.top − new.top`; apply a transform so it looks unmoved	`el.style.transform = 'translateY(' + dy + 'px)'`
Play	drop the transform with a `transition` — the box glides to its real spot	`transition: transform .3s; transform = ''`

The measuring happens in useLayoutEffect (runs after DOM mutation, before paint) so the user never sees the snap — only the smooth glide. This is the engine inside Framer Motion's layout prop and the View Transitions API.

1 · the animations you write (edit me)

// ── Demo 1: simple STATE-DRIVEN CSS transition ───────────────────────
// Toggle a style on state change; the CSS `transition` property fills the
// in-between frames. This is the 90% case — no measuring, no transforms.
function ThemeCard() {
  var themeState = React.useState(true);
  var dark = themeState[0];
  var setDark = themeState[1];

  return (
    <div
      data-testid="theme-card"
      onClick={function () { setDark(!dark); }}
      style={{
        background: dark ? '#0d1117' : '#f6f8fa',
        color: dark ? '#e6edf3' : '#24292f',
        border: '1px solid ' + (dark ? '#30363d' : '#d0d7de'),
        transition: 'background 0.3s ease, color 0.3s ease, border-color 0.3s ease',
        padding: '14px 16px',
        borderRadius: '8px',
        cursor: 'pointer',
        textAlign: 'center',
        fontWeight: '700',
        margin: '0 auto 20px',
        maxWidth: '320px'
      }}
    >
      {dark ? '🌙 Dark — click for light' : '☀️ Light — click for dark'}
    </div>
  );
}

// ── Demo 2: FLIP — animate a POSITION change (reorder) ───────────────
function FlipList() {
  var state = React.useState([
    { id: 1, text: 'Alpha' },
    { id: 2, text: 'Beta' },
    { id: 3, text: 'Gamma' }
  ]);
  var items = state[0];
  var setItems = state[1];

  // holds the last-known position (getBoundingClientRect) of each item, by id
  var positionsRef = React.useRef({});

  // FLIP engine — runs after EVERY render, BEFORE the browser paints.
  React.useLayoutEffect(function () {
    items.forEach(function (item) {
      var el = document.querySelector('[data-item-id="' + item.id + '"]');
      if (!el) return;

      var oldRect = positionsRef.current[item.id];   // FIRST  (previous position)
      var newRect = el.getBoundingClientRect();       // LAST   (position after re-render)

      if (oldRect) {
        var dy = oldRect.top - newRect.top;
        if (dy !== 0) {
          // INVERT: teleport the element back to where it used to be visually
          el.style.transition = 'none';
          el.style.transform = 'translateY(' + dy + 'px)';
          el.offsetHeight; // force reflow — commit the inverted starting state
          // PLAY: animate the transform away — the box glides to its new slot
          requestAnimationFrame(function () {
            el.style.transition = 'transform 0.3s ease';
            el.style.transform = '';
          });
        }
      }
      // remember this position — it becomes FIRST for the next change
      positionsRef.current[item.id] = newRect;
    });
  });

  function moveUp(index) {
    if (index === 0) return;
    var next = items.slice();
    var tmp = next[index - 1];
    next[index - 1] = next[index];
    next[index] = tmp;
    setItems(next);
  }

  function moveDown(index) {
    if (index === items.length - 1) return;
    var next = items.slice();
    var tmp = next[index + 1];
    next[index + 1] = next[index];
    next[index] = tmp;
    setItems(next);
  }

  return (
    <ul
      data-testid="list"
      style={{ listStyle: 'none', padding: 0, margin: '0 auto', maxWidth: '320px' }}
    >
      {items.map(function (item, index) {
        return (
          <li
            key={item.id}
            data-testid="item"
            data-item-id={item.id}
            style={{
              display: 'flex', alignItems: 'center', gap: '10px',
              padding: '12px 14px', marginBottom: '8px',
              background: '#0d1117', border: '1px solid #30363d',
              borderRadius: '8px', color: '#e6edf3'
            }}
          >
            <span data-testid="item-label" style={{ flex: 1, fontWeight: 600 }}>
              {item.text}
            </span>
            <button
              data-testid="move-up"
              data-index={index}
              disabled={index === 0}
              onClick={function () { moveUp(index); }}
              style={{
                background: 'transparent', border: '1px solid #30363d', color: '#61dafb',
                borderRadius: '5px', padding: '2px 8px', cursor: 'pointer', fontSize: '14px'
              }}
            >↑</button>
            <button
              data-testid="move-down"
              data-index={index}
              disabled={index === items.length - 1}
              onClick={function () { moveDown(index); }}
              style={{
                background: 'transparent', border: '1px solid #30363d', color: '#61dafb',
                borderRadius: '5px', padding: '2px 8px', cursor: 'pointer', fontSize: '14px'
              }}
            >↓</button>
          </li>
        );
      })}
    </ul>
  );
}

function App() {
  return (
    <div style={{ maxWidth: '360px', margin: '0 auto' }}>
      <ThemeCard />
      <FlipList />
    </div>
  );
}

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

2 · Babel compiles JSX → element tree

<App/> becomes React.createElement(App). Each setItems() re-renders; useLayoutEffect then measures every keyed <li> and runs First → Last → Invert → Play before paint.

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

3 · live React (FLIP, proven)

Click the card to toggle a smooth color transition. Click ↑/↓ to reorder the list — each item glides to its new slot instead of snapping. The gold-check clicks ↑ on Beta automatically and asserts the DOM order becomes [Beta, Alpha, Gamma].

order: — · gold: 3 items, Alpha first → move-up Beta → [Beta, Alpha, Gamma]

intent → animation pattern

intent	pattern	why
color / size / opacity change	`style={{transition:'.3s'}} + toggle className on state`	state-driven — no measuring needed; browser fills frames
element moves / reorders	FLIP in `useLayoutEffect` (measure → invert → play)	React re-render snaps; FLIP turns the move into an animated transform
mount / unmount animation	defer removal: keep node, add exit class, remove on `transitionend`	React unmounts instantly — you must delay it to animate out
shared-element / crossfade	native `document.startViewTransition()` (see view_transitions)	browser does FLIP for you across the whole page
physics / gestures / drag	Framer Motion `motion` + `layout` prop	library wraps FLIP + spring physics + AnimatePresence exits