mdn · pepelsbey · Dec 4, 2025 · Nov 28, 2025 · Nov 28, 2025 · Dec 1, 2025
@@ -112,6 +112,8 @@ Do not specify supported browsers and their versions in code comments or prose,
 
 - The "viewport-segments-api" directory contains an example demonstrating how to use the [Viewport Segments API](https://developer.mozilla.org/docs/Web/API/Viewport_Segments_API). [Run the example live](https://mdn.github.io/dom-examples/viewport-segments-api/).
 
+- The "view-transitions" directory contains examples and demos of the [View Transition API](https://developer.mozilla.org/docs/Web/API/View_Transition_API) standard. Go to the [View transition API demo index](https://mdn.github.io/dom-examples/view-transitions/) to see what's available.
+
 - The "visual-viewport-api" directory contains a basic demo to show usage of the Visual Viewport API. For more details on how it works, read [Visual Viewport API](https://developer.mozilla.org/docs/Web/API/Visual_Viewport_API). [View the demo live](https://mdn.github.io/dom-examples/visual-viewport-api/).
 
 - The "web-animations-api" directory contains [Web Animation API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API) demos. See the [web animations README](web-animations-api/README.md) for more information.

@@ -0,0 +1,16 @@
+# MDN View Transition API examples
+
+This set of examples demonstrates usage of the [View Transition API](https://developer.mozilla.org/docs/Web/API/View_Transition_API) (also see the [specification](https://drafts.csswg.org/css-view-transitions-2/)).
+
+## Basic examples
+
+- [SPA example](spa/): Demonstrates basic view transition usage in a SPA image gallery.
+- [MPA example](mpa/): Demonstrates basic view transition usage in MPA.
+- [MPA homepage example](mpa-homepage/): Another MPA view transitions example.
+- [MPA homepage example](match-element/): Demonstrates usage of the `match-element` value of the `view-transition-name` property
+
+## View transition types examples
+
+- [SPA transition types gallery](spa-gallery-transition-types/): SPA image gallery that uses transition types to apply different transition animations when the images are moved between using the prev button, next button, and by clicking directly on an image.
+- [MPA transition types example](mpa-chapter-nav-transition-types/): Story app with a chapter on each page. Demonstrates how to apply view transition animations across pages selectively with a transition type applied using the `@view-transition` at-rule.
+- [MPA multiple transition types example](mpa-chapter-nav-multiple-transition-types/): Story app with a chapter on each page. Demonstrates how to apply different view transition animations across pages selectively with different transition types. The transition type is determined on the fly with JavaScript during the navigation.
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Chapter 1: Table of contents MPA view transition types</title>
+    <link href="style.css" rel="stylesheet" />
+    <script defer src="index.js"></script>
+  </head>
+  <body>
+    <nav id="toc">
+      <ol>
+        <li>Chapter 1</li>
+        <li><a href="index2.html">Chapter 2</a></li>
+        <li><a href="index3.html">Chapter 3</a></li>
+        <li><a href="index4.html">Chapter 4</a></li>
+        <li><a href="index5.html">Chapter 5</a></li>
+      </ol>
+    </nav>
+    <section>
+      <h1>Chapter 1</h1>
+
+      <figure>
+        <img
+          src="https://mdn.github.io/shared-assets/images/examples/learn/gallery/pic2.jpg"
+          alt="Rock that looks like a wave" />
+        <figcaption>Rock that looks like a wave</figcaption>
+      </figure>
+
+      <p>
+        I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
+        narwhal asymmetrical. Af health goth shaman in slow-carb godard echo
+        park. Tofu farm-to-table labore salvia tote bag food truck dolore
+        gluten-free poutine kombucha fanny pack +1 franzen lyft fugiat.
+        Chicharrones next level jianbing, enamel pin seitan cardigan bruh
+        snackwave beard incididunt dolor lumbersexual before they sold out
+        dreamcatcher single-origin coffee.
+      </p>
+    </section>
+  </body>
+</html>
@@ -0,0 +1,71 @@
+const determineTransitionType = (oldNavigationEntry, newNavigationEntry) => {
+  // Grab the current and destination URLs from the provided navigation entries
+  const currentURL = oldNavigationEntry.url;
+  const destinationURL = newNavigationEntry.url;
+
+  // Find the index number of a page
+  function determinePageIndex(url) {
+    // Split the URL at the "/" character
+    const array = url.split("/");
+    // Grab the last array item, which should contain the end slug
+    const slug = array[array.length - 1];
+    // If the URL doesn't include the HTML file name, return index 0
+    if (slug.indexOf("html") === -1) {
+      return 0;
+    } else {
+      // Extract the number from the file name, e.g. index1.html -> 1
+      const pageIndex = slug.replace("index", "").replace(".html", "");
+      // If it doesn't contain a number (i.e. index.html), return 0
+      if (pageIndex === "") {
+        return 0;
+      } else {
+        // Return the number
+        return parseInt(pageIndex);
+      }
+    }
+  }
+
+  // Get the page index of the current and destination URLs
+  const currentPageIndex = determinePageIndex(currentURL);
+  const destinationPageIndex = determinePageIndex(destinationURL);
+
+  // Return "forwards" or "backwards" depending on whether currentPageIndex
+  // is bigger or smaller than destinationPageIndex
+  if (currentPageIndex > destinationPageIndex) {
+    return "backwards";
+  } else if (currentPageIndex < destinationPageIndex) {
+    return "forwards";
+  } else {
+    // If the page is reloaded, neither of the above conditions will be true
+    // In this case, we don't need a type, so return "no-type"
+    return "no-type";
+  }
+};
+
+window.addEventListener("pageswap", async (e) => {
+  // Grab the old and new navigation entries on the outgoing page from the pageswap event object's
+  // activation property, pass these to the determineTransitionType() function to determine the type
+  const transitionType = determineTransitionType(
+    e.activation.from,
+    e.activation.entry
+  );
+  console.log(`pageSwap: ${transitionType}`);
+  // Add the type to the active ViewTransition via its types property
+  e.viewTransition.types.add(transitionType);
+});
+
+window.addEventListener("pagereveal", async (e) => {
+  // Grab the old and new navigation entries on the incoming page from the Navigation.activation
+  // object, pass these to the determineTransitionType() function to determine the type
+  const transitionType = determineTransitionType(
+    navigation.activation.from,
+    navigation.activation.entry
+  );
+
+  console.log(`pageReveal: ${transitionType}`);
+  // If the type is "no-type", don't add it to the transition types
+  if (transitionType !== "no-type") {
+    // Add the type to the active ViewTransition via its types property
+    e.viewTransition.types.add(transitionType);
+  }
+});
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Chapter 2: Table of contents MPA view transition types</title>
+    <link href="style.css" rel="stylesheet" />
+    <script defer src="index.js"></script>
+  </head>
+  <body>
+    <nav id="toc">
+      <ol>
+        <li><a href="index.html">Chapter 1</a></li>
+        <li>Chapter 2</li>
+        <li><a href="index3.html">Chapter 3</a></li>
+        <li><a href="index4.html">Chapter 4</a></li>
+        <li><a href="index5.html">Chapter 5</a></li>
+      </ol>
+    </nav>
+    <section>
+      <h1>Chapter 2</h1>
+      <p>
+        I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
+        narwhal asymmetrical. Af health goth shaman in slow-carb godard echo
+        park. Tofu farm-to-table labore salvia tote bag food truck dolore
+        gluten-free poutine kombucha fanny pack +1 franzen lyft fugiat.
+        Chicharrones next level jianbing, enamel pin seitan cardigan bruh
+        snackwave beard incididunt dolor lumbersexual before they sold out
+        dreamcatcher single-origin coffee.
+      </p>
+      <p>
+        Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore
+        bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon.
+        Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie
+        artisan. Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic
+        photo booth occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh
+        occaecat umami four loko adaptogen taiyaki truffaut hexagon neutral milk
+        hotel.
+      </p>
+      <p>
+        Chillwave gastropub chartreuse deserunt butcher umami meditation ennui.
+        Sus post-ironic affogato irony non succulents la croix labore tousled.
+        Tumblr selvage sartorial taxidermy yes plz fashion axe deserunt. Big
+        mood humblebrag hammock meditation, four dollar toast vice bruh minim
+        tacos chartreuse drinking vinegar sunt yes plz YOLO cred. Synth
+        chartreuse est, wayfarers pop-up ut gorpcore consequat ullamco meh lyft
+        crucifix selvage occaecat.
+      </p>
+      <p>
+        Austin mukbang scenester pabst, kale chips helvetica in selvage tote bag
+        drinking vinegar craft beer pickled meh subway tile +1. Big mood kogi
+        blog, vape hella seitan veniam.
+      </p>
+    </section>
+  </body>
+</html>
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Chapter 3: Table of contents MPA view transition types</title>
+    <link href="style.css" rel="stylesheet" />
+    <script defer src="index.js"></script>
+  </head>
+  <body>
+    <nav id="toc">
+      <ol>
+        <li><a href="index.html">Chapter 1</a></li>
+        <li><a href="index2.html">Chapter 2</a></li>
+        <li>Chapter 3</li>
+        <li><a href="index4.html">Chapter 4</a></li>
+        <li><a href="index5.html">Chapter 5</a></li>
+      </ol>
+    </nav>
+    <section>
+      <h1>Chapter 3</h1>
+      <p>
+        Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore
+        bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon.
+        Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie
+        artisan. Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic
+        photo booth occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh
+        occaecat umami four loko adaptogen taiyaki truffaut hexagon neutral milk
+        hotel.
+      </p>
+      <p>
+        Chillwave gastropub chartreuse deserunt butcher umami meditation ennui.
+        Sus post-ironic affogato irony non succulents la croix labore tousled.
+        Tumblr selvage sartorial taxidermy yes plz fashion axe deserunt. Big
+        mood humblebrag hammock meditation, four dollar toast vice bruh minim
+        tacos chartreuse drinking vinegar sunt yes plz YOLO cred. Synth
+        chartreuse est, wayfarers pop-up ut gorpcore consequat ullamco meh lyft
+        crucifix selvage occaecat.
+      </p>
+      <p>
+        Austin mukbang scenester pabst, kale chips helvetica in selvage tote bag
+        drinking vinegar craft beer pickled meh subway tile +1. Big mood kogi
+        blog, vape hella seitan veniam.
+      </p>
+
+      <p>
+        I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
+        narwhal asymmetrical. Af health goth shaman in slow-carb godard echo
+        park. Tofu farm-to-table labore salvia tote bag food truck dolore
+        gluten-free poutine kombucha fanny pack +1 franzen lyft fugiat.
+        Chicharrones next level jianbing, enamel pin seitan cardigan bruh
+        snackwave beard incididunt dolor lumbersexual before they sold out
+        dreamcatcher single-origin coffee.
+      </p>
+    </section>
+  </body>
+</html>
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Chapter 4: Table of contents MPA view transition types</title>
+    <link href="style.css" rel="stylesheet" />
+    <script defer src="index.js"></script>
+  </head>
+  <body>
+    <nav id="toc">
+      <ol>
+        <li><a href="index.html">Chapter 1</a></li>
+        <li><a href="index2.html">Chapter 2</a></li>
+        <li><a href="index3.html">Chapter 3</a></li>
+        <li>Chapter 4</li>
+        <li><a href="index5.html">Chapter 5</a></li>
+      </ol>
+    </nav>
+    <section>
+      <h1>Chapter 4</h1>
+      <p>
+        Chillwave gastropub chartreuse deserunt butcher umami meditation ennui.
+        Sus post-ironic affogato irony non succulents la croix labore tousled.
+        Tumblr selvage sartorial taxidermy yes plz fashion axe deserunt. Big
+        mood humblebrag hammock meditation, four dollar toast vice bruh minim
+        tacos chartreuse drinking vinegar sunt yes plz YOLO cred. Synth
+        chartreuse est, wayfarers pop-up ut gorpcore consequat ullamco meh lyft
+        crucifix selvage occaecat.
+      </p>
+      <p>
+        I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
+        narwhal asymmetrical. Af health goth shaman in slow-carb godard echo
+        park. Tofu farm-to-table labore salvia tote bag food truck dolore
+        gluten-free poutine kombucha fanny pack +1 franzen lyft fugiat.
+        Chicharrones next level jianbing, enamel pin seitan cardigan bruh
+        snackwave beard incididunt dolor lumbersexual before they sold out
+        dreamcatcher single-origin coffee.
+      </p>
+
+      <p>
+        Austin mukbang scenester pabst, kale chips helvetica in selvage tote bag
+        drinking vinegar craft beer pickled meh subway tile +1. Big mood kogi
+        blog, vape hella seitan veniam.
+      </p>
+
+      <p>
+        Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore
+        bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon.
+        Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie
+        artisan. Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic
+        photo booth occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh
+        occaecat umami four loko adaptogen taiyaki truffaut hexagon neutral milk
+        hotel.
+      </p>
+    </section>
+  </body>
+</html>
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Chapter 5: Table of contents MPA view transition types</title>
+    <link href="style.css" rel="stylesheet" />
+    <script defer src="index.js"></script>
+  </head>
+  <body>
+    <nav id="toc">
+      <ol>
+        <li><a href="index.html">Chapter 1</a></li>
+        <li><a href="index2.html">Chapter 2</a></li>
+        <li><a href="index3.html">Chapter 3</a></li>
+        <li><a href="index4.html">Chapter 4</a></li>
+        <li>Chapter 5</li>
+      </ol>
+    </nav>
+    <section>
+      <h1>Chapter 5</h1>
+      <p>
+        Austin mukbang scenester pabst, kale chips helvetica in selvage tote bag
+        drinking vinegar craft beer pickled meh subway tile +1. Big mood kogi
+        blog, vape hella seitan veniam.
+      </p>
+      <p>
+        I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea
+        narwhal asymmetrical. Af health goth shaman in slow-carb godard echo
+        park. Tofu farm-to-table labore salvia tote bag food truck dolore
+        gluten-free poutine kombucha fanny pack +1 franzen lyft fugiat.
+        Chicharrones next level jianbing, enamel pin seitan cardigan bruh
+        snackwave beard incididunt dolor lumbersexual before they sold out
+        dreamcatcher single-origin coffee.
+      </p>
+      <p>
+        Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore
+        bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon.
+        Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie
+        artisan. Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic
+        photo booth occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh
+        occaecat umami four loko adaptogen taiyaki truffaut hexagon neutral milk
+        hotel.
+      </p>
+
+      <p>
+        Chillwave gastropub chartreuse deserunt butcher umami meditation ennui.
+        Sus post-ironic affogato irony non succulents la croix labore tousled.
+        Tumblr selvage sartorial taxidermy yes plz fashion axe deserunt. Big
+        mood humblebrag hammock meditation, four dollar toast vice bruh minim
+        tacos chartreuse drinking vinegar sunt yes plz YOLO cred. Synth
+        chartreuse est, wayfarers pop-up ut gorpcore consequat ullamco meh lyft
+        crucifix selvage occaecat.
+      </p>
+    </section>
+  </body>
+</html>