feat: add Pointer Driven View Transitions documentation and associated styles

Author: martrapp

public/pointer-driver-og.png

@@ -0,0 +1,42 @@
+---
+title: Pointer Driven View Transitions
+description: "Learn how to create interactive view transitions that adapt in real time to pointer movement."
+draft: true
+head:
+  - tag: meta
+    attrs:
+      property: "og:image"
+      content: "/pointer-driven-og.png"
+  - tag: meta
+    attrs:
+      property: "draft"
+      content: "true"
+---
+Wouldn't it be cool to have images of whatever complex DOM subtrees of your current page that you can bend and move around as you like? 
+
+One way to look at the view transition api is this: The API generates snapshots that you can use for animations _…in whatever way you want_. 
+
+
+**In a nutshell**
+* You name the DOM elements you want snapshots for.
+* The View Transition API generates the images for your DOM nodes, no matter how complex the subtree is. And they come in two flavors: bitmaps plus captured CSS properties for the  old image and replaced elements for the new images.
+* Those images are rendered in a layer above everything else. It is easy to move your images freely across the viewport. Even more fun with element-scoped view transitions.
+* The magic lasts as long as there exists at least some animation on one of the generated pseudo elements. Doesn't have to be a CSS animation, CSS transitions and WAAPI animations work as well. You can even provide a promise to the API to wait for.
+* If you want, you can cancel unnecessary default animations in your stylesheet. or you keep them and scrub through their timeline by assigning to the currentTime property of their animations.
+
+## Benefits of Animating Images instead of DOM Subtrees 
+Moving real subtrees through the DOM for animations might quickly become a complex task when the elements are nested in the general layout. . Moving images that render above the normal elements is much easier. Libraries for taking screenshots of DOM elements exist, but they are usually  not very accurate. New techniques like 
+
+Ok, that was a lot of information. To see what is possible with this approach, take a look at the [Forge](https://vtbag.dev/forge) project. It is a small web application that allows you to drag and drop elements into a forge and combine them into new elements. The Forge uses the View Transition API to animate the elements as they are dragged around.
+
+Here are the details step by step.
+
+## Drag-Driven View Transitions
+
+Grab and drag your transition pseudo-elements. 
+
+The natural way to find out how to forge new elements in the example is to just try it out. We want to visually move the element from the centre into one of the forges to see what happens. 
+
+This is very similar to the typical drag and drop code:
+```ts title="Drag and Drop"
+```

src/content/docs/tips/pointer-driven-view-transitions.mdx

@@ -21,30 +21,6 @@ const chambers = document.querySelectorAll<HTMLDivElement>(".chamber")!;
 const breadcrumbs =
   document.querySelector<HTMLDivElement>(".breadcrumbs")!;
 
-const effects = [
-  `        
-        filter: saturate(2.5) brightness(1.2) hue-rotate(340deg);
-        transform: skewX(-3deg);
-      `,
-  `
-        filter: saturate(0.2) brightness(1.2) hue-rotate(190deg);
-        transform: skewX(3deg);
-      `,
-  `  
-        filter: saturate(3) brightness(1.2) contrast(1.3);
-        transform: scaleY(0.5) scaleX(1.5) skewX(3deg);
-      `,
-  `
-        filter: saturate(3) hue-rotate(90deg) brightness(1.3) contrast(1.2);
-        transform: skewX(-3deg);
-      `,
-];
-const shadows = [
-  `box-shadow: inset 0 0 30px rgba(255, 0,0, 0.6), 0 0 20px rgba(255, 230, 200, 0.8);`,
-  `box-shadow: inset 0 0 30px rgba(0, 210, 255, 0.6), 0 0 20px rgba(135, 206, 250, 0.8);`,
-  `box-shadow: inset 0 0 30px rgba(0, 210, 255, 0.6), 0 0 20px rgba(135, 206, 250, 0.8);`,
-  `box-shadow: inset 0 0 35px rgba(0, 210, 255, 0.6), 0 0 60px rgba(135, 206, 250, 0.8);`,
-];
 const styles = new CSSStyleSheet();
 document.adoptedStyleSheets.push(styles);
 
@@ -65,6 +41,7 @@ const moveState = {
   moving: false,
   pointerId: -1,
   raf: 0,
+  lastWhere: -2,
 };
 
 resetForge();
@@ -114,9 +91,10 @@ function turnElement(icon?: string, name?: string) {
   mayStartViewTransition(
     {
       update: () => {
-        const node = levelState.elements[levelState.elements.length - 1]!;
-        elementImage.innerText = icon || node.icon;
-        elementName.innerText = name || node.name;
+        const last = levelState.elements.length - 1;
+        const node = levelState.elements[last];
+        elementImage.innerText = icon || node?.icon || elementImage.innerText;
+        elementName.innerText = name || node?.name || elementName.innerText;
 
       },
       types: ["shuffle"],
@@ -126,12 +104,11 @@ function turnElement(icon?: string, name?: string) {
 }
 function passiveUpdateElement() {
   const node = levelState.elements[levelState.elements.length - 1]!;
-  elementImage.innerText = node.icon;
-  elementName.innerText = node.name;
+  elementImage.textContent = node.icon;
+  elementName.textContent = node.name;
 }
 
 async function initializeLevel() {
-  styles.replaceSync(``);
   write("");
   disableGame();
   levelState.tree = (levelState.level + levelState.random) % data.length;
@@ -152,7 +129,7 @@ async function initializeLevel() {
   levelState.elements.length = 0;
   const level = data[levelState.tree]!;
   let slot = 0;
-  for (let i = 0; i < (reducedMotion() ? 1 : 4); i++) {
+  for (let i = 0; i < (reducedMotion() ? 1 : 1); i++) {
     slot = ~~(Math.random() * level.items.length);
     while (level.items[slot]!.depth <= levelState.level) {
       slot = (slot + 1) % level.items.length;
@@ -216,26 +193,23 @@ function startMove(event: PointerEvent) {
   moveState.y = event.clientY;
   moveState.moving = true;
   moveState.pointerId = event.pointerId;
-  styles.replaceSync(`
-      ::view-transition-group(element) { 
-        top: 0;
-        left: 0;
-      }`);
-  mayStartViewTransition(
+  moveState.lastWhere = -2;
+  drag(0, 0, -1, 0);
+  enableGame();
+  const transition = mayStartViewTransition(
     {
       types: ["drag"],
     },
     { useTypesPolyfill: "always", collisionBehavior: "chaining", respectReducedMotion: false },
-  ).finished.then(() => {
-    styles.replaceSync(`
-      ::view-transition-group(.element) { 
-        top: 0px;
-        left: 0px;
-      }`);
-  });
-  levelState.elements.push(
-    levelState.elements[levelState.elements.length - 1]!,
   );
+  transition.ready.then(() => [...document.getAnimations()]
+    .filter(animation => animation.effect?.pseudoElement?.startsWith("::view-transition"))
+    .forEach((animation) => animation.pause()));
+  transition.finished.finally(() => {
+    styles.replaceSync("");
+    turnElement();
+  });
+  levelState.elements.push(levelState.elements[levelState.elements.length - 1]!);
 }
 
 function stopMove(event: PointerEvent) {
@@ -244,30 +218,28 @@ function stopMove(event: PointerEvent) {
   moveState.moving = false;
   moveState.pointerId = -1;
   disableGame();
-  const current = levelState.elements.length - 1;
-  const node = levelState.elements[current]!;
+  let current = levelState.elements.length - 1;
+  let node = levelState.elements[current]!;
   if (
     node.name === "Invalid Reaction" ||
     node.name === levelState.elements[current - 1]?.name
   ) {
     levelState.elements.pop();
-    passiveUpdateElement();
+    --current;
+    node = levelState.elements[current]!;
   }
-  document.getAnimations().forEach((animation) => animation.play());
-  if (reducedMotion()) {
-    styles.replaceSync(`
-      ::view-transition-group(.element) { 
-        top: 0px;
-        left: 0px;
-      }`);
-  } else {
-    styles.replaceSync(`
-      ::view-transition-group(.element) { 
-        top: 0px;
-        left: 0px;
-        transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      }`);
+  document.documentElement.classList.add("back");
+  if (!reducedMotion()) {
+    styles.replaceSync(``);
   }
+  drag(0, 0, -1, 0);
+
+ document.getAnimations().forEach((animation) => animation.play());
+  setTimeout(() => {
+    document.getAnimations().forEach((animation) => animation.finish());
+    document.documentElement.classList.remove("back");
+  }, 300);
+
   updateBreadcrumbs();
   chambers.forEach((chamber) => chamber.classList.remove("selected"));
   write("");
@@ -308,61 +280,62 @@ function move(event: PointerEvent) {
 }
 
 function work() {
-
-
   const { where, distance, top, left } = geometry(moveState.top, moveState.left);
-
   chambers.forEach((chamber) => chamber.classList.remove("selected"));
   if (where !== -1) {
     chambers[where]!.classList.add("selected");
   }
   const current = levelState.elements.length - 1;
   const next = levelState.elements[current - 1]?.reactions[where] ?? -1;
-  if (next !== -1) {
-    levelState.elements[current] = data[levelState.tree]!.items[next]!;
-    passiveUpdateElement();
-  } else {
-    levelState.elements[current] =
-      where === -1
+  levelState.elements[current] =
+    next !== -1
+      ? data[levelState.tree]!.items[next]!
+      : where === -1
         ? levelState.elements[current - 1]!
         : {
           icon: "⛔",
           name: "Invalid Reaction",
-          reactions: [],
+          reactions: [-1, -1, -1, -1],
           depth: 0,
           parent: -1,
         };
-    passiveUpdateElement();
-  }
+  passiveUpdateElement();
+
   drag(top, left, where, distance);
-  scrub(distance);
+  const time = (distance - 0.33) * 409;
+  document.documentElement.style.setProperty("--extend", "" + Math.max(0, Math.min(1, time / 250)));
+  scrub([
+    "::view-transition-new(element)",
+    "::view-transition-old(element)",
+    "::view-transition-new(element-image)",
+    "::view-transition-old(element-image)",
+  ], time);
 }
 
-function scrub(distance: number) {
+function scrub(pseudoElement: string | string[], time: number) {
   document.getAnimations().forEach((animation) => {
-    if (animation.effect?.pseudoElement?.startsWith(
-      "::view-transition-new(element"
-    ) ||
-      animation.effect?.pseudoElement?.startsWith(
-        "::view-transition-old(element"
-      )) {
-      animation.currentTime = Math.min(248, (distance - 0.5) * 240);
+    if (Array.isArray(pseudoElement)) {
+      if (pseudoElement.includes(animation.effect?.pseudoElement ?? "")) {
+        animation.currentTime = time;
+      }
+    } else {
+      if (animation.effect?.pseudoElement === pseudoElement) {
+        animation.currentTime = time;
+      }
     }
   });
 }
 
 function drag(top: number, left: number, where: number, distance: number) {
-  styles.replaceSync(`
-      ::view-transition-group(.element) { 
-        top: ${top}px;
-        left: ${left}px;
-      }
-      ::view-transition-new(element) {${effects[where] ?? ""}}
-      ::view-transition-new(element-image) {${effects[where] ?? ""}}
-      ::view-transition-new(element) {${shadows[where] ?? ""}}
-      ::view-transition-image-pair(.element) {
-      scale: ${Math.min(2, 1 + distance / 2)};
-      }`);
+  document.documentElement.style.setProperty("--top", `${top}px`);
+  document.documentElement.style.setProperty("--left", `${left}px`);
+  document.documentElement.style.setProperty("--scale", `${Math.min(2, 1 + distance * 0.5)}`);
+
+  document.documentElement.dataset.where = where === 0 ? "furnace" : where === 1 ? "freezing" : where === 2 ? "pressure" : where === 3 ? "radiation" : "";
+  if (where !== moveState.lastWhere) {
+    console.log("where", where, "lastWhere", moveState.lastWhere);
+    moveState.lastWhere = where;
+  }
 }
 
 function geometry(top: number, left: number) {