Update gesturevt demo

bokand · Aug 6, 2024 · d168987 · d168987
1 parent 0339db2
commit d168987
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 7 deletions.
diff --git a/gesturevt/assets/index-f9ff1ce0.js b/gesturevt/assets/index-f9ff1ce0.js
diff --git a/gesturevt/index.html b/gesturevt/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<script type="module" crossorigin src="/gesturevt/assets/index-f9ff1ce0.js"></script>
+<script type="module" crossorigin src="/gesturevt/assets/index-dfc8859e.js"></script>
 
 <meta name="viewport" content="width=device-width, minimum-scale=1">
 
@@ -11,7 +11,7 @@
   }
   #backarea {
     position: fixed;
-    width: 100px;
+    width: 100%;
     height: 100%;
     left: 0;
     top: 0;
@@ -67,13 +67,18 @@
     top: 0;
   }
 
-  /* style for the top screen in the stack */
-  .screen.top {
+  /* The screen that's moved by an active gesture */
+  .screen.active {
     animation-timeline: --progress-timeline;
     animation-fill-mode: forwards;
     animation-timing-function: linear;
   }
 
+  /* style for the top screen in the stack */
+  .screen.top {
+    z-index: 1;
+  }
+
   /* style for when the gesture is commited and the screen animating to exit */
   .screen.end {
     animation-fill-mode: forwards;
@@ -96,18 +101,33 @@
     }
   }
 
-  @keyframes screenswipe {
+  @keyframes builtinback {
     to {
       transform: translateX(100vw);
     }
   }
 
-  @keyframes screenswipeend {
+  @keyframes builtinbackend {
     to {
       transform: translateX(150vw);
     }
   }
 
+  @keyframes slidefromleft {
+    from {
+      transform: translateX(-100vw);
+    }
+    to {
+      transform: translateX(0vw);
+    }
+  }
+
+  @keyframes slidefromleftend{
+    to {
+      transform: translateX(0vw);
+    }
+  }
+
   @keyframes shrink {
     to {
       transform: scale(0.7);
@@ -119,6 +139,30 @@
       transform: scale(0);
     }
   }
+
+  @keyframes gmailshrink {
+    to {
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes gmailshrinkend {
+    to {
+      transform: translateY(-20vh) scale(0.01);
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotateX(15deg) rotateY(45deg);
+    }
+  }
+
+  @keyframes spinend {
+    to {
+      transform: rotateX(30deg) rotateY(280deg) scale(0.5);
+    }
+  }
 </style>
 
 <div id="progressScroller" class="scroller">

diff --git a/gesturevt/resources/banana-pie-srp.png b/gesturevt/resources/banana-pie-srp.png
diff --git a/gesturevt/resources/goo.gl-stock-a.png b/gesturevt/resources/goo.gl-stock-a.png
diff --git a/gesturevt/resources/goo.gl-stock-b.png b/gesturevt/resources/goo.gl-stock-b.png
diff --git a/gesturevt/resources/news-article.png b/gesturevt/resources/news-article.png
diff --git a/gesturevt/resources/news-frontpage.png b/gesturevt/resources/news-frontpage.png
diff --git a/gesturevt/resources/pants-hemming-srp.png b/gesturevt/resources/pants-hemming-srp.png
diff --git a/gesturevt/resources/pants-srp.png b/gesturevt/resources/pants-srp.png
diff --git a/gesturevt/resources/srp-cats.png b/gesturevt/resources/srp-cats.png
diff --git a/gesturevt/resources/srp-couches.png b/gesturevt/resources/srp-couches.png