Home Original page

ViewTransition - Web APIs | MDN

Instance properties

ViewTransition.finished Read only

A Promise that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user.

ViewTransition.ready Read only

A Promise that fulfills once the pseudo-element tree is created and the transition animation is about to start.

ViewTransition.types Read only

A ViewTransitionTypeSet that allows the types set on the view transition to be accessed and modified.

ViewTransition.updateCallbackDone Read only

A Promise that fulfills when the promise returned by the document.startViewTransition() method's callback fulfills.

Instance methods

skipTransition()

Skips the animation part of the view transition, but doesn't skip running the document.startViewTransition() callback that updates the DOM.

Examples

In the following SPA example, the ViewTransition.ready promise is used to trigger a custom circular reveal view transition emanating from the position of the user's cursor on click, with animation provided by the Web Animations API.

js

// Store the last click event
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // Create a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // Specify which pseudo-element to animate
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}

This animation also requires the following CSS, to turn off the default CSS animation and stop the old and new view states from blending in any way (the new state "wipes" right over the top of the old state, rather than transitioning in):

css

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}

Specifications

Specification
CSS View Transitions Module Level 1
# viewtransition

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.