{"id":8424,"date":"2026-01-30T12:47:10","date_gmt":"2026-01-30T17:47:10","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8424"},"modified":"2026-02-05T14:38:30","modified_gmt":"2026-02-05T19:38:30","slug":"reacts-viewtransition-element","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/reacts-viewtransition-element\/","title":{"rendered":"React’s ViewTransition Element"},"content":{"rendered":"\n

As a bit of a connoisseur of View Transitions and user of React, I’m naturally interested in the fact that React now has a <ViewTransition><\/code> element<\/a> it ships directly (in a “Canary” pre-release). <\/p>\n\n\n\n

I wanna take a look at it, but to start, let’s… not<\/em> use it. View Transitions are a feature of the web platform itself, not specific to any framework. So React can’t really stop us from using them. And it’s not entirely weird just do it.<\/p>\n\n\n\n

Using View Transitions in React (Classic Style?)<\/h2>\n\n\n\n

The same-page View Transitions API (the one most relevant for React, as opposed to multi-page View Transitions), is largely this:<\/p>\n\n\n

document<\/span>.startViewTransition(()<\/span> =><\/span> {\n  \/\/ change DOM here<\/span>\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
But changing the DOM is… React’s job. It doesn’t really love it when you do it yourself. So instead of doing any DOM manipulation directly ourselves, we’ll do something React-y instead like update state. <\/p>\n\n\n
import<\/span> React, { useState } from<\/span> \"react\"<\/span>;\n\nexport<\/span> default<\/span> function<\/span> DemoOne<\/span>(<\/span>) <\/span>{\n  const<\/span> [buttonExpanded, setButtonExpanded] = useState(false<\/span>);\n\n  const<\/span> toggleButton = ()<\/span> =><\/span> {\n    document<\/span>.startViewTransition(()<\/span> =><\/span> {\n      setButtonExpanded(!buttonExpanded);\n    });\n  };\n\n  return<\/span> (\n    <button<\/span>\n      className<\/span>={<\/span>`button<\/span> ${buttonExpanded<\/span> ? \"expanded<\/span>\" :<\/span> \"\"}`}\n      onClick<\/span>={toggleButton}<\/span>\n    ><\/span>\n      Button\n    <\/button<\/span>><\/span><\/span>\n  );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The visual part will be handled by CSS. The state change changes as a class, and the classes change the look.<\/p>\n\n\n
.button<\/span> {\n   \/* button styles *\/<\/span>\n\n   &.expanded {\n     scale<\/span>: 1.4<\/span>;\n     rotate<\/span>: -6deg<\/span>;\n   }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n