View transitions, same document (document.startViewTransition)

Baseline 2025 (Chrome 111, Safari 18, Firefox 144). `:active-view-transition` Baseline January 2026. View transition types: Chrome 125, Safari 18.2, Firefox 147.

Chrome 111Edge 111Safari 18Firefox 144

Wrap a DOM change in `document.startViewTransition()` and the browser animates between the old and new states; elements with the same `view-transition-name` morph between positions. Shared-element transitions with one line of JS.

CSS

.fx-027-grid {
  display: flex;
  gap: 12px;
  margin-top: 12px
}
.fx-027-a,.fx-027-b {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font: 700 24px system-ui
}
.fx-027-a {
  background: #2563eb;
  view-transition-name: fx-027-a
}
.fx-027-b {
  background: #ec4899;
  view-transition-name: fx-027-b
}
.fx-027.alt .fx-027-grid {
  flex-direction: row-reverse
}
::view-transition-group(*) {
  animation-duration: .4s
}
:root:active-view-transition .fx-027 button {
  pointer-events: none
}
.fx-027 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<div class="fx-027">
  <button onclick="document.startViewTransition(()=>document.querySelector('.fx-027').classList.toggle('alt'))">Swap</button>
  <div class="fx-027-grid"><div class="fx-027-a">A</div><div class="fx-027-b">B</div></div>
</div>

Fallback: Call the callback directly when `!document.startViewTransition`; the change happens without animation.

Source: web.dev/blog/baseline-digest-jan-2026 and https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/144

Prompt

Animate state changes with the View Transition API: give each element that should morph a unique `view-transition-name`, wrap the DOM update in `document.startViewTransition(() => update())` (with a plain call as fallback), and tune motion via `::view-transition-old/new(name)` and `::view-transition-group(*) { animation-duration }`. Use `:root:active-view-transition` to disable interaction while it runs.