View Transitions API

The View Transitions API can animate the visual change between two DOM states, while the page should remain usable without the animation.

Small example

const update = () => {
  document.querySelector('#message').textContent = 'Updated';
};

if (document.startViewTransition) {
  document.startViewTransition(update);
} else {
  update();
}

The fallback calls the same update directly. The transition is an enhancement, not a requirement for the content to change.

Keep the motion optional

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation-duration: 0s;
  }
}

Keep the state change understandable without motion and test focus, keyboard use, and assistive technology.

Common mistakes

• Do not assume every browser supports the API.
• Do not delay an important update only to wait for an effect.
• Keep transitions short and avoid motion that causes discomfort.