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; }

The demo’s full CSS

.dm-vt-track { display: flex; margin-top: 12px; padding: 8px; border-radius: 10px; background: #fff; border: 1px solid #dfe2ea; }
.dm-vt-track.dm-end { justify-content: flex-end; }
.dm-vt-card { view-transition-name: dm-vt-card; padding: 12px 16px; border-radius: 8px; background: #4f46e5; color: #fff; font-weight: 700; font-size: 13.5px; }
.dm-vt-btn { font: inherit; font-weight: 700; font-size: 13.5px; padding: 9px 14px; border-radius: 9px; border: 1px solid #c9cdd8; background: #fff; color: #0a0a0f; cursor: pointer; }

/* and the script */
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

The pattern in the demo IS the fallback: call startViewTransition when it exists, and just make the change when it does not. The card jumps instead of gliding. Nothing breaks.