Weblin

View Transitions Demos

Every transition option in one place. Click each demo to try it.

1. Cross-document (MPA)

Click a card to navigate to detail.html. The [vt] element morphs between pages. No JavaScript needed.

Alpha Alpha Cross-fade into detail page Beta Beta Same transition, different content Gamma Gamma The browser handles the morph 
<a href="detail.html" vt="card-a">...</a>
<!-- detail.html: -->
<img src="..." vt="card-a" />

2. Just-in-time naming (vt.js)

Same grid, but using [vt-jit]. Only the element you navigate from/to gets named. The name is derived from the URL on both sides.

Widget Widget vt-jit derives name from URL Gadget Gadget No shared state needed Doohickey Doohickey Cleans up after transition 
<a href="product.html?id=1" vt-jit>...</a>
<!-- product.html: -->
<img src="..." vt-jit />
<script src="../js/vt.js"></script>

3. In-document [vt] (SPA-like)

Click to swap views. Title, image, and body transition independently via document.startViewTransition().

Home View

This is the home view. Click About to transition to a different layout.

About View

This is the about view. The browser morphs old snapshots into new positions.

<h1 vt="title">...</h1>
<p vt="body">...</p>
<script>
function spaTo(view) {
  document.startViewTransition(() => {
    document.querySelectorAll(".spa-view")
      .forEach(v => v.classList.toggle("active", v.dataset.view === view));
  });
}
</script>

4. [vt-class] - shared animation styles

[vt] gives identity. [vt-class] assigns a shared animation class so many elements share one keyframe rule. Click "Animate" to swap A/B.

Fade

A
vt-class="fade"

Scale

A
vt-class="scale"

Slide up

A
vt-class="slide-up"

Slide up (Menut)

A
vt-class="slideup"

Slide left

A
vt-class="slide-left"

Slide right

A
vt-class="slide-right"
<div vt="card" vt-class="fade">...</div>
<div vt="card" vt-class="scale">...</div>

<script>
document.startViewTransition(() => {
  // DOM changes - vt-class handles the animation
});
</script>