fix semantic zoom animation

folk-systems · Nov 18, 2024 · a6552d8 · a6552d8
1 parent d871582
commit a6552d8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -33,6 +33,7 @@ <h1>Folk Canvas Primitives</h1>
       <li><a href="spreadsheet-graph.html">Spreadsheet Graph</a></li>
       <li><a href="spreadsheet-propagator.html">Spreadsheet Propagator</a></li>
       <li><a href="wiggly.html">Wiggly</a></li>
+      <li><a href="semantic-zoom.html">Semantic Zoom</a></li>
       <!-- <li><a href="chains-of-thought/index.html">Chains of thought</a></li> -->
     </ul>
   </body>

diff --git a/demo/semantic-zoom.html b/demo/semantic-zoom.html
@@ -63,8 +63,16 @@
         height: 100%;
       }
 
-      input {
-        margin-top: 1rem;
+      ::view-transition-group(slider),
+      ::view-transition-old(slider),
+      ::view-transition-new(slider) {
+        animation-duration: 0s !important;
+      }
+
+      label {
+        display: flex;
+        align-items: center;
+        margin: 1rem;
       }
 
       fc-connection {
@@ -95,13 +103,9 @@
         width: 20px;
         aspect-ratio: 1;
         border-radius: 50%;
-
-        h2,
-        p {
-          display: none;
-        }
       }
 
+      body[zoom='0'] fc-geometry :is(h2, p),
       body[zoom='50'] fc-geometry p {
         display: none;
       }
@@ -110,7 +114,7 @@
   <body zoom="1">
     <label>
       Zoom:
-      <input type="range" min="0" max="100" value="100" />
+      <input type="range" min="0" max="100" value="100" style="view-transition-name: slider" />
     </label>
 
     <fc-geometry id="box1" x="100" y="100">
@@ -152,13 +156,13 @@ <h2>Consectetur elit</h2>
       FolkGeometry.register();
       FolkConnection.register();
 
-      const range = document.querySelector('input');
-
       document.body.querySelectorAll('fc-geometry').forEach((el, i) => (el.style.viewTransitionName = `g${i}`));
       document.body.querySelectorAll('fc-connection').forEach((el, i) => (el.style.viewTransitionName = `c${i}`));
       document.body.querySelectorAll('h2').forEach((el, i) => (el.style.viewTransitionName = `h${i}`));
       document.body.querySelectorAll('p').forEach((el, i) => (el.style.viewTransitionName = `p${i}`));
 
+      const range = document.querySelector('input');
+
       range.addEventListener('input', (e) => {
         const currentZoom = range.valueAsNumber;
         let semanticZoom;