View Transitions Playground
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.
View Transitions Playground
View Transitions Playground
Trigger same-document transitions powered by document.startViewTransition and copy the full snippet.
Live Demo
Cross-fade old and new snapshot — the default.
Snippet (HTML + CSS + JS)
<!-- HTML -->
<button id="trigger">Toggle</button>
<div id="content">
<article style="view-transition-name: card;">Card content</article>
</div>
<!-- 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.
Last updated:
This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.
For AI agents: how to call this tool
Machine-readable contract, endpoints and examples. Humans can ignore this section.
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
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
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
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
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.