[{"_1":2,"_63":-5,"_64":-5},"loaderData",{"_3":4,"_12":13},"routes/_layout",{"_5":6},"pages",[7],{"_8":9,"_10":11},"slug","about","title","What's going on here?","routes/blog/index",{"_14":15,"_46":47,"_48":47,"_49":39,"_50":51,"_62":47},"posts",[16],{"_8":17,"_18":19,"_44":45},"react-view-transitions-a-hands-on-look-at-the-api-that-might-finally-make-page-transitions-not-suck","meta",{"_10":20,"_21":22,"_23":24,"_25":26,"_35":36,"_37":38,"_42":43},"React View Transitions: A Hands-On Look","description","A practical walkthrough of the View Transitions API in React — what works, what does not work, and whether it is ready for real projects.","date","2026-03-16","keywords",[27,28,29,30,31,32,33,34],"react","view transitions","view transitions api","react 19","page transitions","animations","startViewTransition","css animations","author","Denys Bashkatov","tags",[39,40,41],"React","JavaScript","CSS","social",true,"html","

Smooth page transitions on the web have historically required heavyweight animation libraries or manual CSS transitions with state management. The View Transitions API provides a native solution, and React 19 has started integrating support for it. I've been experimenting with it, and here is what I've found.

What the View Transitions API Does

The API captures a "before" snapshot of the DOM, lets us make changes, then animates between the old and new states. The browser takes screenshots of elements, cross-fades them, and interpolates positions.

Basic vanilla usage:

document.startViewTransition(() => {\n  // Update the DOM however you want\n  document.querySelector('.content').innerHTML = newContent;\n});

The browser snapshots the old state, runs our callback, snapshots the new state, then animates between them. We don't need to write keyframes, deal with FLIP calculations, or worry about layout thrashing.

Using It in React

React 19 introduced the <ViewTransition> component and integrated startViewTransition into its rendering pipeline. React can now coordinate its state updates with the browser's transition mechanism.

A basic example with React Router:

import { ViewTransition } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\nfunction PostCard({ post }) {\n  const navigate = useNavigate();\n\n  return (\n    <ViewTransition name={`post-${post.id}`}>\n      <article\n        onClick={() => navigate(`/post/${post.id}`)}\n        style={{ cursor: 'pointer' }}\n      >\n        <img src={post.thumbnail} alt={post.title} />\n        <h3>{post.title}</h3>\n      </article>\n    </ViewTransition>\n  );\n}\n\nfunction PostDetail({ post }) {\n  return (\n    <ViewTransition name={`post-${post.id}`}>\n      <article>\n        <img src={post.image} alt={post.title} />\n        <h1>{post.title}</h1>\n        <p>{post.body}</p>\n      </article>\n    </ViewTransition>\n  );\n}

The name prop is the key — matching ViewTransition names across navigations causes one element to morph into the other. The thumbnail on the list page expands into the hero image on the detail page without any animation code.

Controlling the Animation with CSS

The API exposes pseudo-elements for styling:

/* Customize the transition duration */\n::view-transition-old(*),\n::view-transition-new(*) {\n  animation-duration: 300ms;\n}\n\n/* Make a specific element slide instead of fade */\n::view-transition-old(post-hero) {\n  animation: slide-out 250ms ease-in;\n}\n\n::view-transition-new(post-hero) {\n  animation: slide-in 250ms ease-out;\n}\n\n@keyframes slide-out {\n  to { transform: translateX(-100%); opacity: 0; }\n}\n\n@keyframes slide-in {\n  from { transform: translateX(100%); opacity: 0; }\n}

view-transition-class can be used to group elements and animate them together with shared CSS rules.

Integration with React's Concurrent Rendering

React ties view transitions to its concurrent rendering model. State updates inside a transition are batched and wrapped in startViewTransition. This works with useTransition:

import { useTransition } from 'react';\n\nfunction Tabs({ tabs }) {\n  const [activeTab, setActiveTab] = useState(0);\n  const [isPending, startTransition] = useTransition();\n\n  return (\n    <div>\n      <nav>\n        {tabs.map((tab, i) => (\n          <button\n            key={i}\n            onClick={() => {\n              startTransition(() => setActiveTab(i));\n            }}\n          >\n            {tab.label}\n          </button>\n        ))}\n      </nav>\n      <ViewTransition>\n        <div className={isPending ? 'loading' : ''}>\n          {tabs[activeTab].content}\n        </div>\n      </ViewTransition>\n    </div>\n  );\n}

React's concurrent rendering ensures the new content is ready before the transition starts, avoiding a flash of incomplete UI.

What Works Well

Built into the browser. We don't need Framer Motion or GSAP — the browser handles it natively with GPU-level compositing.

Shared element transitions. The list-to-detail pattern — where a card morphs into a full page — works well with very little code.

Progressive enhancement. If the browser does not support the API, nothing breaks. The transition simply does not happen. Detection is straightforward:

const supportsViewTransitions = 'startViewTransition' in document;

Current Limitations

Browser support. Cross-document view transitions (MPA) are available in Chrome and Edge. Firefox and Safari are still catching up. Same-document transitions have broader support.

Complex transitions. Beyond simple fades and morphs, we are back to writing detailed CSS animations. Animations where elements change size, position, and content simultaneously can produce visual artifacts.

Debugging. The pseudo-element approach makes it harder to inspect transition state in DevTools compared to normal elements.

React's integration is still evolving. The <ViewTransition> component works, but the ergonomics around conditional transitions and transition groups may change.

Route Transitions Pattern

A more complete pattern for animating between routes:

import { ViewTransition } from 'react';\nimport { Routes, Route, useLocation } from 'react-router-dom';\n\nfunction App() {\n  const location = useLocation();\n\n  return (\n    <ViewTransition>\n      <Routes location={location}>\n        <Route path="/" element={<Home />} />\n        <Route path="/about" element={<About />} />\n        <Route path="/post/:id" element={<Post />} />\n      </Routes>\n    </ViewTransition>\n  );\n}

With some CSS, every route change gets a smooth transition:

::view-transition-old(root) {\n  animation: fade-and-scale-out 200ms ease-in forwards;\n}\n\n::view-transition-new(root) {\n  animation: fade-and-scale-in 200ms ease-out forwards;\n}\n\n@keyframes fade-and-scale-out {\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n@keyframes fade-and-scale-in {\n  from {\n    opacity: 0;\n    transform: scale(1.05);\n  }\n}

When to Use It

Internal tools, Electron apps, PWAs where Chrome/Edge dominance is fine — the API is stable enough for same-document transitions.

Public-facing sites — treat it as progressive enhancement. Chrome users get transitions, others get a standard instant swap.

Complex animation requirements — keep the animation library for now. The View Transitions API handles common cases well but is not a replacement for something like Framer Motion when we need gesture-driven animations or spring physics.

The direction is right though. Browser-native transitions with framework integration is exactly where this should be heading. The less JavaScript we ship for visual polish, the better.

\n","page",1,"totalPages","tag","allTags",[52,41,53,54,55,40,56,57,58,59,39,60,61],"Architecture","Database","Docker","Homelab","Linux","Networking","Node.js","PostgreSQL","TypeScript","Ubuntu","total","actionData","errors"]

Tech Notes

Tech tips and new discoveries