Tools
View Transition Builder
The browser photographs the page before and after a change and animates between the two. Name an element and it morphs from its old box to its new one. Press the button to run the real thing.
Newly availablesince Oct 2025Limited availability
Your browser does not support view transitions, so the change below is instant. That is the fallback: the copied script makes the change either way.
One name, one element, at a time
view-transition-name tells the browser "this box before and this box after are the same thing".
It must be unique on the page at the moment of the snapshot: two elements sharing a name cancels the whole
transition, silently. For a list, set the name on the one item being opened, not on every item.
Between pages, there is no script
@view-transition { navigation: auto; } in the CSS of both pages is the entire
cross-document feature. Same-origin link clicks animate, and a named element on both pages morphs across the
load. It turns a multi-page site into something that feels like an app without becoming one.
The guard that matters
Call document.startViewTransition when it exists and just make the change when it does not. The
fallback is an instant update, which is what every site did before. Wrap the custom durations in
prefers-reduced-motion: no-preference. Browser status is on the
feature page; shape the easing in the easing studio.