Update demo descriptions

Author: bramus

demo/feature-detection/scripts.js

@@ -1,11 +1,15 @@
 import { supports } from "../js/feature-detection.js";
 
 const labels = {
-  sameDocument: "Same-Document View Transitions (<code>document.startViewTransition</code>)",
+  sameDocument:
+    "Same-Document View Transitions (<code>document.startViewTransition</code>)",
   types: "View Transition Types (<code>transition.types</code>)",
-  crossDocument: "Cross-Document View Transitions (<code>@view-transition</code> rule)",
-  elementScoped: "Element-Scoped View Transitions (<code>Element.startViewTransition</code>)",
-  activeViewTransition: "Active View Transition tracking (<code>document.activeViewTransition</code>)",
+  crossDocument:
+    "Cross-Document View Transitions (<code>@view-transition</code> rule)",
+  elementScoped:
+    "Element-Scoped View Transitions (<code>Element.startViewTransition</code>)",
+  activeViewTransition:
+    "Active View Transition tracking (<code>document.activeViewTransition</code>)",
 };
 
 const statusLights = document.getElementById("status-lights");
@@ -20,8 +24,4 @@ statusLights.innerHTML = Object.entries(supports)
   )
   .join("");
 
-document.getElementById("output").innerText = JSON.stringify(
-  supports,
-  null,
-  4,
-);
+document.getElementById("output").innerText = JSON.stringify(supports, null, 4);

demo/get-animations/index.html

@@ -52,10 +52,10 @@
         </div>
         <div class="shell-explanation">
             <h2>Animations: getAnimations</h2>
-            <p>Demonstrates the <code>getAnimations</code> function from the toolkit to inspect View Transition animations.</p>
+            <p>The <code>getAnimations</code> function from the toolkit is a wrapper around <code>document.getAnimations()</code> that returns only the animations related to View Transitions. You can further filter the animations by providing a <code>view-transition-name</code> and/or a <code>ViewTransitionPart</code>.</p>
             <hr>
             <h3>The Code</h3>
-            <p>The demo triggers a View Transition, randomizes layout, and calls <code>getAnimations</code>:</p>
+            <p>The demo triggers a View Transition, randomizes layout, and calls <code>getAnimations</code> to get the animations of the element with the <code>view-transition-name: box</code>:</p>
             <pre><code>const t = document.startViewTransition(() => {
   randomize();
 });

demo/measure/index.html

@@ -51,8 +51,8 @@
             </div>
         </div>
         <div class="shell-explanation">
-            <h2>Measure</h2>
-            <p>Extract and measure geometry (size and position) of View Transition pseudo-elements using <code>extractGeometry</code>.</p>
+            <h2>Animations: Measure</h2>
+            <p>Extract and measure geometry (size and position) of View Transition pseudo-elements using <code>extractGeometry</code>. The result is an object with a <code>before</code> and <code>after</code> property, each containing the geometry of the element. Each geometry object has <code>width</code>, <code>height</code>, <code>top</code>, and <code>left</code> properties.</p>
             <hr>
             <h3>The Code</h3>
             <p>The demo triggers a View Transition on click and logs the geometry of the box group:</p>

demo/navigation-types/index.html

@@ -54,14 +54,15 @@ <h2>Navigation Types</h2>
             <p>Automatically inject <code>from-&lt;name&gt;</code> and <code>to-&lt;name&gt;</code> View Transition Types based on navigation origin and destination.</p>
             <hr>
             <h3>The Code</h3>
-            <p>The demo uses <code>useAutoTypes</code> with a route map to determine types during navigation:</p>
+            <p>The demo uses <code>useAutoTypes</code> with a route map to determine types during navigation. A route map is a mapping of route names to their corresponding URL patterns. In this demo, we use the following route map:</p>
             <pre><code>const routeMap = {
     "index": "/navigation-types/demo",
     "detail": "/navigation-types/detail/:id",
     "about": "/navigation-types/about"
 };
 
 useAutoTypes(routeMap);</code></pre>
+            <p>This will set the <code>from-&lt;name&gt;</code> and <code>to-&lt;name&gt;</code> types on the active <code>ViewTransition</code> based on the navigation origin and destination. For example, if you navigate from the index page to a detail page, the <code>from-index</code> and <code>to-detail</code> types will be set on the active <code>ViewTransition</code>.</p>
             <p>In your CSS, you can then target these types using the <code>:active-view-transition-type</code> pseudo-class to style elements conditionally:</p>
             <pre><code>:active-view-transition-type(from-index) .from { background-color: #f0f0f0; }
 :active-view-transition-type(to-index) .to { background-color: #f0f0f0; }

demo/optimize/demo.html

@@ -14,7 +14,7 @@
 </head>
 <body>
   <div class="box" id="box-normal">REGULAR</div>
-  <div class="box" id="box-flip">FLIP</div>
+  <div class="box" id="box-optimized">OPTIMIZED</div>
 
   <div class="debug" id="debug"></div>
 </body>

demo/optimize/index.html

@@ -50,18 +50,19 @@
             </div>
         </div>
         <div class="shell-explanation">
-            <h2>Optimize</h2>
+            <h2>Animations: Optimize</h2>
             <p>Optimize <code>::view-transition-group</code> animations using performant <code>transform</code>-based animations instead of <code>width</code> and <code>height</code> changes.</p>
             <hr>
             <h3>The Code</h3>
-            <p>The demo triggers a View Transition on click and optimizes the "box-flip" group:</p>
+            <p>When you click the page, the demo triggers a View Transition and optimizes the "box-optimized" group. This optimized animation is a transform-based animation that animates the <code>scale</code> property instead of <code>width</code> and <code>height</code>.</p>
             <pre><code>document.body.addEventListener("click", async (e) => {
   const t = document.startViewTransition(() => {
     mutateTheDOM();
   });
   await t.ready;
-  optimizeGroupAnimations(t, "box-flip");
+optimizeGroupAnimations(t, "box-optimized");
 });</code></pre>
+            <p>Because this optimized animation runs on the compositor, it will not be subject to jank, unlike the default <code>width</code>/<code>height</code> animations.</p>
             <hr>
             <h3>Functions Used</h3>
             <p>This demo uses <code>optimizeGroupAnimations</code> to replace width/height animations with performant transform-based animations:</p>

demo/optimize/scripts.js

@@ -43,13 +43,13 @@ document.body.addEventListener("click", async (e) => {
     });
     await t.ready;
 
-    optimizeGroupAnimations(t, "box-flip");
+    optimizeGroupAnimations(t, "box-optimized");
 
     // Dump the generated keyframes
     const animations = getAnimations(t, "*", ViewTransitionPart.Group);
     const animationKeyframes = {
       regular: animations[0].effect.getKeyframes(),
-      flip: animations[1].effect.getKeyframes(),
+      optimized: animations[1].effect.getKeyframes(),
     };
     document.getElementById("debug").innerText = JSON.stringify(
       animationKeyframes,

demo/optimize/styles.css

@@ -14,8 +14,8 @@
   #box-normal {
     view-transition-name: box-normal;
   }
-  #box-flip {
-    view-transition-name: box-flip;
+  #box-optimized {
+    view-transition-name: box-optimized;
   }
 
   #debug {

demo/playback-control/index.html

@@ -51,10 +51,10 @@
         </div>
         <div class="shell-explanation">
             <h2>Playback Control</h2>
-            <p>Control the playback of a View Transition. Use utilities to pause, resume, or scrub all animations simultaneously.</p>
+            <p>Control the playback of a View Transition. Use utilities to pause, resume, or scrub all animations linked to a View Transition simultaneously.</p>
             <hr>
             <h3>The Code</h3>
-            <p>The demo binds click and input events to <code>pause</code>, <code>resume</code>, and <code>scrub</code> functions:</p>
+            <p>The demo binds click and input events to the <code>pause</code>, <code>resume</code>, and <code>scrub</code> functions:</p>
             <pre><code>document.getElementById("pause").addEventListener("click", () => {
   pause(t);
 });
@@ -66,14 +66,15 @@ <h3>The Code</h3>
 document.getElementById("scrub").addEventListener("input", (e) => {
   scrub(t, e.target.value);
 });</code></pre>
+            <p>Once the View Transition is paused, use the slider to scrub through the animation, or click resume to let it finish.</p>
             <hr>
             <h3>Functions Used</h3>
             <p>This demo uses <code>pause</code>, <code>resume</code>, and <code>scrub</code> to synchronize View Transition playback with a range slider or custom timeline:</p>
             <pre><code>import { pause, resume, scrub } from "view-transitions-toolkit/playback-control";
 
-pause(t); // Pauses all VT animations
-resume(t); // Resumes all VT animations
-scrub(t, position); // Sets animations to 50% playback</code></pre>
+pause(t); // Pauses all animations linked to a View Transition
+resume(t); // Resumes all animations linked to a View Transition
+scrub(t, 0.5); // Sets animations to 50% playback</code></pre>
         </div>
         <footer class="shell-footer desktop-only">
           <p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>

demo/scroll-driven-view-transition/index.html

@@ -50,11 +50,11 @@
             </div>
         </div>
         <div class="shell-explanation">
-            <h2>Scroll-Driven</h2>
-            <p>Connect view transitions to scroll animations. Create fluid, progressive scene changes driven by the user's viewport.</p>
+            <h2>Scroll-Driven View Transition</h2>
+            <p>When scrolling the page, the header card will toggle between the large and small state. This is acthieve by starting a View Transition that is immediately paused and then scrubbed based on the scroll position.</p>
             <hr>
             <h3>The Code</h3>
-            <p>The demo starts a View Transition and synchronizes its playback with page scrolling:</p>
+            <p>Between two scroll positions a View Transition is started and, once started, immediately paused and scrubbed based on the scroll position.</p>
             <pre><code>const startViewTransition = async () => {
   document.startViewTransition(() => {
     document.querySelector(".card").classList.toggle("small");
@@ -66,15 +66,18 @@ <h3>The Code</h3>
 const updateAnimations = () => {
   scrub(document.activeViewTransition, scrollProgress);
 };</code></pre>
+            <p>When scrolling back the animations need to play in reverse. This is achieved by reversing the animations and scrubbing from 1 to 0.</p>
+            <pre><code>if (isReverse) {
+              for (const anim of getAnimations(document.activeViewTransition)) {
+                anim.reverse();
+              }
+            }</code></pre>
             <hr>
             <h3>Functions Used</h3>
             <p>This demo uses <code>trackActiveViewTransition</code>, <code>getAnimations</code>, and utilities like <code>pause</code> / <code>scrub</code> to synchronize a View Transition with scroll state:</p>
             <pre><code>import { trackActiveViewTransition } from "view-transitions-toolkit/track-active-view-transition";
-import { pause, scrub } from "view-transitions-toolkit/playback-control";
-
-trackActiveViewTransition();
-pause(document.activeViewTransition);
-scrub(document.activeViewTransition, scrollProgress);</code></pre>
+import { getAnimations } from "view-transitions-toolkit/animations";
+import { pause, scrub } from "view-transitions-toolkit/playback-control";</code></pre>
         </div>
         <footer class="shell-footer desktop-only">
             <p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>