W3cubDocs

/Web APIs

Document: startViewTransition() method

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The startViewTransition() method of the View Transitions API starts a new view transition and returns a ViewTransition object to represent it.

When startViewTransition() is invoked, a sequence of steps is followed as explained in The view transition process.

Syntax

js

startViewTransition(callback)

Parameters

callback

A callback function typically invoked to update the DOM during the view transition process, which returns a Promise. The callback is invoked once the API has taken a screenshot of the current page. When the promise returned by the callback fulfills, the view transition begins in the next frame. If the promise returned by the callback rejects, the transition is abandoned.

Return value

A ViewTransition object instance.

Examples

Basic usage

In our Basic View Transitions demo, the updateView() function handles both browsers that do and don't support the View Transitions API. In supporting browsers, we invoke startViewTransition() to set off the view transition process without worrying about the return value.

js

function updateView(event) {
  // Handle the difference in whether the event is fired on the <a> or the <img>
  let targetIdentifier;
  if (event.target.firstChild === null) {
    targetIdentifier = event.target;
  } else {
    targetIdentifier = event.target.firstChild;
  }

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // Fallback for browsers that don't support View Transitions:
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // With View Transitions:
  const transition = document.startViewTransition(() => displayNewImage());
}

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
startViewTransition 111 111 No No 97 No 111 111 No No No 22.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition