TaskWrite transition(fn) that calls document.startViewTransition(fn) if it exists, else just fn(). Wrap a DOM update that sets <p id="out">: starter has 'before', after call should say 'after'. Log document.getElementById('out').textContent. Also log typeof document.startViewTransition.
View Transitions for crossfade
125 XP9 min
Theory
Native page-state transitions
document.startViewTransition(callback) animates between DOM states for free. The browser snapshots the current DOM, runs your callback (which mutates the DOM), snapshots the new DOM, and crossfades between them.
document.startViewTransition(() => {
document.body.innerHTML = "<h1>New state</h1>";
});What you don't have to write
- Capture before-state.
- Animate via CSS keyframes.
- Capture after-state.
- Diff and patch DOM.
The browser does all of it. Default animation: a soft crossfade.
Browser support note
Chrome and Edge have it (since 2023). Safari shipped support in 2024. Firefox is behind a flag at the time of writing. Always check if (document.startViewTransition) before calling.
Graceful degradation
function transition(update) {
if (document.startViewTransition) {
document.startViewTransition(update);
} else {
update();
}
}Browsers without support still get the new state — they just skip the animation.
🔒
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.
Sign up — free trial →First 15 lessons in each track are free. No card needed for those.