View Transitions Playground

View Transitions Playground

Trigger same-document transitions powered by document.startViewTransition and copy the full snippet.

Your browser lacks View Transitions support — the demo falls back to an instant state swap. Snippet still copies.

Live Demo

Cross-fade old and new snapshot — the default.

Emerald

Snippet (HTML + CSS + JS)

<!-- HTML -->
<button id="trigger">Toggle</button>
<main id="content">
  <article style="view-transition-name: card;">Card content</article>
</main>

<!-- CSS -->
<style>
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 350ms;
  animation-timing-function: ease-in-out;
}
</style>

<!-- JavaScript -->
<script>
const trigger = document.getElementById('trigger');
const content = document.getElementById('content');

function toggle() {
  // Mutate the DOM here. The browser snapshots before & after.
  content.classList.toggle('alt-state');
}

trigger.addEventListener('click', () => {
  if (!document.startViewTransition) {
    toggle();
    return;
  }
  document.startViewTransition(toggle);
});
</script>

<!-- Cross-document (multi-page) -->
<style>
@view-transition {
  navigation: auto;
}
</style>

The @view-transition at-rule at the bottom enables cross-document transitions when the user navigates between pages on the same origin.

What This Tool Does

View Transitions Playground is built for deterministic developer and agent workflows.

Trigger View Transitions API animations live in your browser — fade, slide, scale, morph, flip — and copy the HTML+CSS+JS snippet including cross-document @view-transition.

Use How to Use for execution steps and FAQ for constraints, policies, and edge cases.

Last updated:

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

Agent Invocation

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/view-transitions-playground/

For automation planning, fetch the canonical contract at /api/tool/view-transitions-playground.json.

How to Use View Transitions Playground

  1. 1

    Pick a transition style

    Choose fade, slide, scale, morph, or flip. Each preset comes with its own keyframes and pseudo-element rules targeting ::view-transition-old and ::view-transition-new.

  2. 2

    Trigger the demo

    Press Trigger Transition. If the browser supports document.startViewTransition the animation runs against a live element. Older browsers fall back to an instant swap so the snippet still renders.

  3. 3

    Inspect the snippet

    The right panel shows the full HTML+CSS+JS pattern including the optional @view-transition at-rule that enables cross-document transitions for multi-page navigations on the same origin.

  4. 4

    Copy and paste

    Press Copy to grab the entire snippet as a single block. Drop it into your Astro, Next, or vanilla project; mutate the DOM inside the startViewTransition callback to animate the change.

Frequently Asked Questions

What is View Transitions Playground?
View Transitions Playground demonstrates the document.startViewTransition API in your browser. Pick a transition style, trigger the animation against a live element, and copy the matching HTML, CSS, and JavaScript.
What if my browser does not support View Transitions?
The tool detects support at load time and shows a banner. Unsupported browsers fall back to an instant DOM swap so the demo still works visually, and the copied snippet is identical regardless of detection.
Does it cover cross-document transitions?
Yes. Every snippet includes the @view-transition at-rule with navigation: auto, which opts cross-document navigations on the same origin into the same transition pipeline as same-document changes.
Does it send my data to a server?
No. Everything runs locally — the transition CSS, the JavaScript trigger, and the snippet generation. Nothing leaves your browser.
Why use view-transition-name on the morph preset?
Setting view-transition-name on a stable element pairs the old and new snapshots so the browser interpolates between them instead of cross-fading. The morph preset wires this up so the colored card animates position and color smoothly.