feat(site): change color and slide text (#3177)

unionlabs · Oct 30, 2024 · b0dc70d · b0dc70d
2 parents 127b3ba + 7996be0
commit b0dc70d
Show file tree

Hide file tree

Showing 2 changed files with 248 additions and 66 deletions.
diff --git a/site/src/layouts/AnimationLayout.astro b/site/src/layouts/AnimationLayout.astro
@@ -101,13 +101,55 @@ const slideTextAnimation = {
         grid-area: 4 / 3 / 5 / 6;
         z-index: 4;
     }
+
+    @keyframes slideOutLeft {
+        from {
+            transform: translateX(0);
+            opacity: 1;
+        }
+        to {
+            transform: translateX(-100%);
+            opacity: 0;
+        }
+    }
+
+    @keyframes slideInRight {
+        from {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
 </style>
 
 <script>
   import {rotateCamera} from "../lib/matrix-cover";
 
-  document.addEventListener('astro:after-preparation', (e) => {
-    rotateCamera();
+  const pathToIndexMap = {
+    '/': 0,
+    '/learn': 1,
+    '/ecosystem': 2,
+    '/team': 3
+  }
+
+  document.addEventListener('astro:after-preparation', (event: any) => {
+    console.log('Full event:', event);
+
+    // Get path from URL
+    const currentPath = window.location.pathname
+
+    // Get current index from path
+    const currentIndex = pathToIndexMap[currentPath] ?? 0
+
+    // For testing, let's rotate based on just the current path
+    if (currentPath in pathToIndexMap) {
+      // Simple alternating direction for now
+      const direction = currentIndex % 2 === 0 ? 'right' : 'left'
+      rotateCamera(direction as "left" | "right", currentIndex)
+    }
   });
 
   let headerGrid;