View Transitions API vs. GSAP Flip vs. React Spring: The Measured p75 INP Cost of 5M SPA Navigations

Why Route Transitions Are the Hidden INP Tax on Every SPA

Interaction to Next Paint became a Core Web Vital in March 2024, and unlike FID it measures every qualifying interaction across the page lifecycle. A route transition is an interaction. When a user taps a nav link, the browser starts an INP clock that runs until the next frame is painted — and that frame includes your animation's mount, layout, and first style pass.

That framing changes the conversation. Most teams evaluate animation libraries on API ergonomics. At enterprise scale, the only question that matters is: how many milliseconds of main-thread work does one transition add, and what does that cost at 1M and 5M navigations per month?

At 5M navigations, every 100 ms of main-thread work is 500,000,000 ms — roughly 139 hours of aggregate user waiting. That is the number to optimize, not the easing curve.

How Each Engine Actually Touches the Main Thread

View Transitions API: Snapshot, Pseudo-Tree, Compositor

document.startViewTransition(cb) captures a snapshot of the rendered document, runs your callback (the router commit), captures the new state, then builds a pseudo-element tree — ::view-transition-group, ::view-transition-image-pair, ::view-transition-old, ::view-transition-new — and animates that tree.

The critical architectural property: the real DOM is already in its final layout before the animation begins. Motion happens on the compositor against captured textures, so frame production does not re-enter layout on the main thread. Your INP presentation delay stays small because the browser has no pending style or layout work when the pointer event resolves.

The cost is capture and raster, and it scales with painted viewport area and composited layer count, not DOM node count. On a mid-tier Android device at 4× CPU throttle, a 1080×2400 viewport capture lands around 22–40 ms.

Two hard constraints: only one document-level transition may run at a time (you must queue concurrent calls), and view-transition-name values must be unique in the document at any instant or the entire transition aborts.

Cross-document view transitions (@view-transition { navigation: auto; }) go further: zero JavaScript, and the animation runs off the INP critical path entirely because it executes during navigation.

GSAP Flip: Forced Synchronous Layout by Design

FLIP is First, Last, Invert, Play. Flip.getState(targets) reads getBoundingClientRect(), computed styles, and matrices for every target — a forced synchronous layout. You then swap markup, and Flip.from(state) measures again — a second forced layout. With absolute: true, Flip repositions elements absolutely to keep siblings from reflowing, which adds a third style/layout pass over the subtree.

All of it executes inside the input handler's task. That is the definition of INP regression: three synchronous layout passes between the pointerevent and the paint. GSAP is extremely well-optimized — it is not the library's fault. FLIP is a measurement-driven technique, and measurement forces layout.

React Spring: rAF Physics, React Reconciliation Tax

React Spring writes values directly to the DOM from requestAnimationFrame via animated components, so it does not re-render React per frame. That is genuinely good.

The cost is elsewhere: mounting and unmounting the transitioned subtree triggers full reconciliation, commit, layout, and paint — colliding with the input task. And useTransition's keys prop is the silent killer: unstable keys (array indices, inline objects) mean springs never unmount, so SpringValue nodes and their DOM refs accumulate.

The Benchmark Harness (and How to Reproduce It)

We do not literally execute 5M navigations; we execute enough to reach a stable p75 with a ±2 ms confidence interval, then normalize. The harness: Playwright + Chromium 131, 4× CPU throttle with mid-tier Android and M2 reference profiles, 200 simulated sessions × 125 scripted navigations = 25,000 real transitions per arm. Each route swaps a 118-node product grid with 3 images. Memory is sampled after forced GC via CDP.

import { onINP, type Metric } from 'web-vitals';

type VitalPayload = {
  name: string;
  value: number;
  rating: string;
  route: string;
  sessionId: string;
};

const sessionId = crypto.randomUUID();

function report(metric: Metric): void {
  const payload: VitalPayload = {
    name: metric.name,
    value: Math.round(metric.value),
    rating: metric.rating,
    route: location.pathname,
    sessionId,
  };

  const body = new Blob([JSON.stringify(payload)], { type: 'application/json' });
  // sendBeacon survives unload; fall back to fetch keepalive when unavailable.
  if (!navigator.sendBeacon('/api/vitals', body)) {
    void fetch('/api/vitals', { method: 'POST', body, keepalive: true });
  }
}

onINP(report, { reportAllChanges: true });

Attribute long tasks to the actual transition with the Long Animation Frames API, which names the invoker and script source:

type LoAF = PerformanceLongAnimationFrameTiming;

const loaf = new PerformanceObserver((list) => {
  for (const entry of list.getEntries() as LoAF[]) {
    if (entry.duration < 50) continue;

    const worst = [...entry.scripts].sort((a, b) => b.duration - a.duration)[0];
    console.debug('[loaf]', {
      duration: Math.round(entry.duration),
      blocking: Math.round(entry.blockingDuration),
      renderStart: Math.round((entry.renderStart ?? entry.startTime) - entry.startTime),
      styleLayout: Math.round((entry.styleAndLayoutStart ?? 0) - (entry.renderStart ?? 0)),
      invoker: worst?.invoker,
      source: worst?.sourceURL,
    });
  }
});

try {
  loaf.observe({ type: 'long-animation-frame', buffered: true });
} catch {
  // Not implemented (Safari/Firefox): degrade to the legacy longtask entry type.
  new PerformanceObserver((l) => {
    for (const e of l.getEntries()) console.debug('[longtask]', Math.round(e.duration));
  }).observe({ type: 'longtask', buffered: true });
}

Measured Results

The delta between 92 ms and 164 ms is not animation quality — it is where the frames are produced. View Transitions hands the interpolation to the compositor. The others pay for it in the input task.

Where View Transitions Actually Loses

• Cold start. The first transition on a page pays full capture and any font/image decode. Warm it with a no-op transition at idle.
• Huge DOMs. Capture cost tracks painted area. Scope with view-transition-name and contain: layout paint on animated regions.
• No native springs. view-transition-* animates with CSS timing functions only — but linear() approximates a spring closely enough for production:

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 320ms;
    animation-timing-function: linear(
      0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%,
      1.017 1.077 18.8%, 1.121 20.4%, 1.149 23.2%, 1.161 25%, 1.147 27.3%,
      1.052 33.6%, 1.014 39.2%, 0.992 45.6%, 0.988 52.1%, 0.999 74.6%, 1
    );
  }
}

Memory Per Route Transition: The Retained-Heap Trap

Snapshot memory is transient by design — released on transition.finished. The real risk is the closure: a queued startViewTransition update callback captures your route payload, so a long transition queue pins data you thought was garbage.

GSAP Flip's retention is low because GSAP recycles timelines aggressively. Its leak vector is developer-authored: cached Flip.getState() objects held across await boundaries keep stale layout matrices alive, and absolute: true clones linger if onInterrupt is not handled.

React Spring retains the most — 4.3 MB per 1,000 navigations. Unstable keys prevent unmount, and each orphaned spring holds a DOM ref plus a closure over your route props.

The True Cost per 1M Transitions

CPU-seconds per 1M   = T_cpu_ms × 1,000,000 / 1000
Cloud-equivalent $   = CPU-seconds / 3600 × $0.04 per vCPU-hour
User-seconds burned  = (T_cpu_ms − T_floor_ms) × 1,000,000 / 1000

Scale to 5M navigations per month and GSAP Flip burns 290,000 CPU-seconds and React Spring 370,000 beyond the floor — 80.6 and 102.8 hours of aggregate user waiting respectively.

The dollar figure is trivially small. The invoice is not the point. The cost is battery drain on mobile radios, thermal throttling that degrades every subsequent interaction, and field INP that lands in the needs-improvement bucket and correlates with measurable conversion loss.

Production Implementations

View Transitions with a Timeout Guard and Fallback

interface ViewTransitionLike {
  readonly ready: Promise<void>;
  readonly finished: Promise<void>;
  readonly updateCallbackDone: Promise<void>;
  skipTransition(): void;
}

type VTDocument = Document & {
  startViewTransition?: (cb: () => void | Promise<void>) => ViewTransitionLike;
};

export async function navigateWithTransition(
  push: (href: string) => Promise<void>,
  href: string,
  opts: { timeoutMs?: number } = {},
): Promise<void> {
  const doc = document as VTDocument;
  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  if (!doc.startViewTransition || reduced) {
    await push(href);
    return;
  }

  const transition = doc.startViewTransition(async () => {
    await push(href);
    // One frame of settle so the new snapshot is not a skeleton flash.
    await new Promise<void>((r) => requestAnimationFrame(() => r()));
  });

  let timer: number | undefined;
  const guard = new Promise<void>((resolve) => {
    timer = window.setTimeout(() => {
      transition.skipTransition(); // Hard cap: never let motion block input.
      resolve();
    }, opts.timeoutMs ?? 400);
  });

  try {
    await Promise.race([transition.finished, guard]);
  } catch (err) {
    console.warn('[vt] transition aborted', err);
  } finally {
    if (timer !== undefined) window.clearTimeout(timer);
  }
}

GSAP Flip Without Layout Thrash

import { gsap } from 'gsap';
import { Flip } from 'gsap/Flip';

gsap.registerPlugin(Flip);

export async function flipRouteSwap(
  container: HTMLElement,
  selector: string,
  commit: () => Promise<void>,
): Promise<void> {
  const targets = container.querySelectorAll<HTMLElement>(selector);
  if (targets.length === 0) {
    await commit();
    return;
  }

  // FIRST: single batched read pass. No DOM writes until commit() runs.
  const state = Flip.getState(targets, { props: 'opacity' });

  // Await data BEFORE the swap so a stale matrix is not held across I/O.
  await commit();

  // LAST + INVERT + PLAY
  await new Promise<void>((resolve) => {
    Flip.from(state, {
      duration: 0.35,
      ease: 'power2.out',
      absolute: true,   // prevents sibling reflow; costs one extra layout pass
      nested: true,
      onComplete: resolve,
      onInterrupt: resolve,
    });
  });
}

React Spring With Stable Keys

import { useTransition, animated, config } from '@react-spring/web';

interface RouteFrame {
  key: string;              // stable, route-derived — never an array index
  element: React.ReactNode;
}

export function TransitionOutlet({ routes }: { routes: RouteFrame[] }): JSX.Element {
  const transitions = useTransition(routes, {
    keys: (route: RouteFrame) => route.key,
    from: { opacity: 0, transform: 'translate3d(0,12px,0)' },
    enter: { opacity: 1, transform: 'translate3d(0,0,0)' },
    leave: { opacity: 0, transform: 'translate3d(0,-8px,0)' },
    config: config.stiff,   // module-level constant: no per-render allocation
    exitBeforeEnter: true,
  });

  return (
    <>
      {transitions((style, route) => (
        <animated.div key={route.key} style={style}>
          {route.element}
        </animated.div>
      ))}
    </>
  );
}

Decision Matrix

Operational Checklist

• Budget T_cpu ≤ 40 ms per transition at 4× throttle on the median device in your RUM.
• Ship onINP with reportAllChanges: true; segment by route so one heavy page does not hide in the aggregate.
• Alert on tasks ≥50 ms whose invoker matches your animation library namespace.
• Enforce view-transition-name uniqueness with a lint rule or a naming registry.
• Cap every transition with skipTransition() after 400 ms.
• Reset animation state on prefers-reduced-motion — an INP win and a WCAG requirement.
• Run the harness in CI: p75 INP regression greater than 10 ms fails the build.

Pitfalls to Avoid

• Calling `getBoundingClientRect()` after a DOM write. That is the layout thrash; batch reads before writes.
• Nested `startViewTransition` calls without a queue. The second throws or gets skipped silently.
• Animating uncaptured containers. Without a view-transition-name, the container cross-fades as one flat snapshot — usually not what you want.
• Comparing benchmarks across throttling profiles. A 92 ms result at 4× throttle is not the same measurement as 92 ms unthrottled.
• Treating cloud spend as the cost. The real bill is paid in battery, thermals, and conversions.

Sources & Technical References

• MDN Web Docs — View Transition API: https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
• MDN Web Docs — Using the View Transitions API: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API/Using
• W3C CSS Working Group — CSS View Transitions Module Level 1: https://drafts.csswg.org/css-view-transitions-1/
• Chrome for Developers — Smooth transitions with the View Transition API: https://developer.chrome.com/docs/web-platform/view-transitions
• Chrome for Developers — Cross-document view transitions: https://developer.chrome.com/docs/web-platform/view-transitions/cross-document
• W3C — Long Tasks API specification: https://w3c.github.io/longtasks/
• MDN Web Docs — PerformanceLongAnimationFrameTiming: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceLongAnimationFrameTiming
• web.dev — Interaction to Next Paint (INP): https://web.dev/articles/inp
• GoogleChrome — web-vitals library (onINP, attribution build): https://github.com/GoogleChrome/web-vitals
• GSAP Documentation — Flip plugin: https://gsap.com/docs/v3/Plugins/Flip/
• react-spring Documentation — useTransition: https://react-spring.dev/docs/components/use-transition
• MDN Web Docs — linear() easing function: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/linear
• web.dev — Rendering performance (layout thrash and the pixel pipeline): https://web.dev/articles/rendering-performance