Animate drawer menu on mobile web (#7711)

* slide in/out drawer * increase width slightly * exponential easing function
2025-02-12 21:51:16 +00:00
parent 66f5e3a833
commit 1a3ecdf6ec
3 changed files with 60 additions and 14 deletions
@@ -215,6 +215,24 @@ input:focus {
  }
 }

+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
 /* animating radix dropdowns requires knowing the data attributes */
 .dropdown-menu-transform-origin > * {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);