Motion

View transitions

Newly availablesince Oct 2025

Replaces: A router-level animation library. The browser snapshots the old and new states and animates between them, across full page loads too.

See it working

I glide

The syntax

/* same-document */
document.startViewTransition(() => updateTheDOM());

/* across page loads, no script at all */
@view-transition { navigation: auto; }

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable

The demo also runs this script, shown for reference:

document.querySelector('.dm-vt-btn').addEventListener('click', function () {
  var t = document.querySelector('.dm-vt-track');
  var flip = function () { t.classList.toggle('dm-end'); };
  if (document.startViewTransition) document.startViewTransition(flip); else flip();
});

For browsers without it

Feature-test it: call startViewTransition when it exists, and just make the change when it does not. The element jumps instead of gliding. Nothing breaks.