diff --git a/README.md b/README.md
index 184c2693..38ed432c 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,7 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
- The "web-storage" directory contains a basic demo to show usage of the Web Storage API. For more detail on how it works, read [Using the Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API). [View the demo live](https://mdn.github.io/dom-examples/web-storage/).
-- The "view-transitions" directory contains a basic demo to show usage of the [View Transitions API](https://developer.mozilla.org/docs/Web/API/View_Transitions_API). [View the demo live](https://mdn.github.io/dom-examples/view-transitions/).
+- The "view-transitions" directory contains demos to show usage of the [View Transitions API](https://developer.mozilla.org/docs/Web/API/View_Transitions_API), both for single-page app [View the SPA demo live](https://mdn.github.io/dom-examples/view-transitions/spa/) and multiple-page app [View the MPA demo live](https://mdn.github.io/dom-examples/view-transitions/mpa/) view transitions.
- The "web-share" directory contains a basic demo to show usage of the [Web Share API](https://developer.mozilla.org/docs/Web/API/Navigator/share). [View the demo live](https://mdn.github.io/dom-examples/web-share/).
diff --git a/view-transitions/mpa/images/image1.jpg b/view-transitions/mpa/images/image1.jpg
new file mode 100644
index 00000000..c3622549
Binary files /dev/null and b/view-transitions/mpa/images/image1.jpg differ
diff --git a/view-transitions/mpa/images/image2.jpg b/view-transitions/mpa/images/image2.jpg
new file mode 100644
index 00000000..1ad42b4b
Binary files /dev/null and b/view-transitions/mpa/images/image2.jpg differ
diff --git a/view-transitions/mpa/index.html b/view-transitions/mpa/index.html
new file mode 100644
index 00000000..09e4215c
--- /dev/null
+++ b/view-transitions/mpa/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ Cross-document view transition example: Page 1
+
+
+
+
+
+
+
+
+
diff --git a/view-transitions/mpa/index.js b/view-transitions/mpa/index.js
new file mode 100644
index 00000000..65305eee
--- /dev/null
+++ b/view-transitions/mpa/index.js
@@ -0,0 +1,13 @@
+console.log("script loaded");
+
+window.addEventListener("pageswap", event => {
+ console.log("pageswap fired");
+ // event.viewTransition.skipTransition();
+});
+
+
+window.addEventListener("pagereveal", event => {
+ console.log("pagereveal fired");
+ // event.viewTransition.skipTransition();
+});
+
diff --git a/view-transitions/mpa/page2.html b/view-transitions/mpa/page2.html
new file mode 100644
index 00000000..fcd888fc
--- /dev/null
+++ b/view-transitions/mpa/page2.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ 
+
+
+
diff --git a/view-transitions/mpa/styles.css b/view-transitions/mpa/styles.css
new file mode 100644
index 00000000..1a1f244e
--- /dev/null
+++ b/view-transitions/mpa/styles.css
@@ -0,0 +1,73 @@
+/* Example layout */
+
+html {
+ font-family: Arial, Helvetica, sans-serif;
+ height: 100%;
+}
+
+body {
+ margin: 0;
+ height: inherit;
+}
+
+img {
+ width: 100vw;
+ height: 100vh;
+ object-fit: cover;
+}
+
+p {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ font-size: 2rem;
+ padding: 20px;
+ margin: 0;
+ border-radius: 5px;
+ background-color: rgba(255 255 255 / 0.8);
+}
+
+/* Turn cross-document view-transitions on */
+/* Note that this at-rule is all that is needed to create the default cross-fade animation */
+
+@view-transition {
+ navigation: auto;
+}
+
+/* Customize the default animation */
+
+/* ::view-transition-old(root),
+::view-transition-new(root) {
+ animation-duration: 0.5s;
+} */
+
+/* create a new animation */
+
+@keyframes move-out {
+ from {
+ transform: translateY(0%);
+ }
+
+ to {
+ transform: translateY(-100%);
+ }
+}
+
+@keyframes move-in {
+ from {
+ transform: translateY(100%);
+ }
+
+ to {
+ transform: translateY(0%);
+ }
+}
+
+::view-transition-old(root) {
+ animation: 0.4s ease-in both move-out;
+
+}
+
+::view-transition-new(root) {
+ animation: 0.4s ease-in both move-in;
+}
diff --git a/view-transitions/images/jungle-coast.jpg b/view-transitions/spa/images/jungle-coast.jpg
similarity index 100%
rename from view-transitions/images/jungle-coast.jpg
rename to view-transitions/spa/images/jungle-coast.jpg
diff --git a/view-transitions/images/jungle-coast_th.jpg b/view-transitions/spa/images/jungle-coast_th.jpg
similarity index 100%
rename from view-transitions/images/jungle-coast_th.jpg
rename to view-transitions/spa/images/jungle-coast_th.jpg
diff --git a/view-transitions/images/tree-bird.jpg b/view-transitions/spa/images/tree-bird.jpg
similarity index 100%
rename from view-transitions/images/tree-bird.jpg
rename to view-transitions/spa/images/tree-bird.jpg
diff --git a/view-transitions/images/tree-bird_th.jpg b/view-transitions/spa/images/tree-bird_th.jpg
similarity index 100%
rename from view-transitions/images/tree-bird_th.jpg
rename to view-transitions/spa/images/tree-bird_th.jpg
diff --git a/view-transitions/images/view-from-the-sky.jpg b/view-transitions/spa/images/view-from-the-sky.jpg
similarity index 100%
rename from view-transitions/images/view-from-the-sky.jpg
rename to view-transitions/spa/images/view-from-the-sky.jpg
diff --git a/view-transitions/images/view-from-the-sky_th.jpg b/view-transitions/spa/images/view-from-the-sky_th.jpg
similarity index 100%
rename from view-transitions/images/view-from-the-sky_th.jpg
rename to view-transitions/spa/images/view-from-the-sky_th.jpg
diff --git a/view-transitions/images/watery-view.jpg b/view-transitions/spa/images/watery-view.jpg
similarity index 100%
rename from view-transitions/images/watery-view.jpg
rename to view-transitions/spa/images/watery-view.jpg
diff --git a/view-transitions/images/watery-view_th.jpg b/view-transitions/spa/images/watery-view_th.jpg
similarity index 100%
rename from view-transitions/images/watery-view_th.jpg
rename to view-transitions/spa/images/watery-view_th.jpg
diff --git a/view-transitions/index.html b/view-transitions/spa/index.html
similarity index 100%
rename from view-transitions/index.html
rename to view-transitions/spa/index.html
diff --git a/view-transitions/script.js b/view-transitions/spa/script.js
similarity index 100%
rename from view-transitions/script.js
rename to view-transitions/spa/script.js
diff --git a/view-transitions/style.css b/view-transitions/spa/style.css
similarity index 100%
rename from view-transitions/style.css
rename to view-transitions/spa/style.css