From 1f1d7551fb9051de2fe1b87a54593b7fa0962971 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 26 May 2025 18:26:40 -0700
Subject: [PATCH] Organize animations

---
 src/assets/styles/animations.scss             | 75 ++++++++++++++++++
 src/lib/components/SegmentedController.svelte | 79 +------------------
 2 files changed, 79 insertions(+), 75 deletions(-)
 create mode 100644 src/assets/styles/animations.scss

diff --git a/src/assets/styles/animations.scss b/src/assets/styles/animations.scss
new file mode 100644
index 0000000..f484dbe
--- /dev/null
+++ b/src/assets/styles/animations.scss
@@ -0,0 +1,75 @@
+/* Navigation Icon Animations
+ * -------------------------------------------------------------------------- */
+
+// Work icon - cursor wiggle
+@keyframes cursorWiggle {
+	0%, 100% { transform: rotate(0deg) scale(1); }
+	25% { transform: rotate(-8deg) scale(1.05); }
+	75% { transform: rotate(8deg) scale(1.05); }
+}
+
+// Photos icon - masonry height changes
+@keyframes masonryRect1 {
+	0%, 100% { 
+		height: 10px;
+		y: 2px;
+	}
+	50% { 
+		height: 6px;
+		y: 2px;
+	}
+}
+
+@keyframes masonryRect2 {
+	0%, 100% { 
+		height: 6px;
+		y: 2px;
+	}
+	50% { 
+		height: 10px;
+		y: 2px;
+	}
+}
+
+@keyframes masonryRect3 {
+	0%, 100% { 
+		height: 4px;
+		y: 14px;
+	}
+	50% { 
+		height: 8px;
+		y: 10px;
+	}
+}
+
+@keyframes masonryRect4 {
+	0%, 100% { 
+		height: 8px;
+		y: 10px;
+	}
+	50% { 
+		height: 4px;
+		y: 14px;
+	}
+}
+
+// Labs icon - test tube rotation
+@keyframes tubeRotate {
+	0%, 100% { transform: rotate(0deg); }
+	25% { transform: rotate(-10deg); }
+	75% { transform: rotate(10deg); }
+}
+
+// Universe icon - star spin
+@keyframes starSpin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(720deg); }
+}
+
+// Placeholder animations (not currently used)
+@keyframes photoMasonry {
+	0%, 100% { transform: scale(1); }
+	25% { transform: scale(1); }
+	50% { transform: scale(1); }
+	75% { transform: scale(1); }
+}
\ No newline at end of file
diff --git a/src/lib/components/SegmentedController.svelte b/src/lib/components/SegmentedController.svelte
index cd8754d..2c9ee55 100644
--- a/src/lib/components/SegmentedController.svelte
+++ b/src/lib/components/SegmentedController.svelte
@@ -112,6 +112,8 @@
 </nav>
 
 <style lang="scss">
+	@import '../../assets/styles/animations';
+	
 	.segmented-controller {
 		display: flex;
 		align-items: center;
@@ -176,7 +178,8 @@
 	
 	// Third item is Labs (index 3)
 	.nav-item:nth-of-type(3) :global(svg.animate) {
-		animation: tubeBubble 0.6s ease;
+		animation: tubeRotate 0.6s ease;
+		transform-origin: center bottom;
 	}
 	
 	// Fourth item is Universe (index 4)
@@ -184,27 +187,6 @@
 		animation: starSpin 0.6s ease;
 	}
 	
-	@keyframes cursorWiggle {
-		0%, 100% { transform: rotate(0deg) scale(1); }
-		25% { transform: rotate(-8deg) scale(1.05); }
-		75% { transform: rotate(8deg) scale(1.05); }
-	}
-	
-	@keyframes photoMasonry {
-		0%, 100% { 
-			transform: scale(1);
-		}
-		25% {
-			transform: scale(1);
-		}
-		50% {
-			transform: scale(1);
-		}
-		75% {
-			transform: scale(1);
-		}
-	}
-	
 	// Specific animation for photo masonry rectangles
 	.nav-item:nth-of-type(2) :global(svg.animate rect:nth-child(1)) {
 		animation: masonryRect1 0.6s ease;
@@ -222,57 +204,4 @@
 		animation: masonryRect4 0.6s ease;
 	}
 	
-	@keyframes masonryRect1 {
-		0%, 100% { 
-			height: 10px;
-			y: 2px;
-		}
-		50% { 
-			height: 6px;
-			y: 2px;
-		}
-	}
-	
-	@keyframes masonryRect2 {
-		0%, 100% { 
-			height: 6px;
-			y: 2px;
-		}
-		50% { 
-			height: 10px;
-			y: 2px;
-		}
-	}
-	
-	@keyframes masonryRect3 {
-		0%, 100% { 
-			height: 4px;
-			y: 14px;
-		}
-		50% { 
-			height: 8px;
-			y: 10px;
-		}
-	}
-	
-	@keyframes masonryRect4 {
-		0%, 100% { 
-			height: 8px;
-			y: 10px;
-		}
-		50% { 
-			height: 4px;
-			y: 14px;
-		}
-	}
-	
-	@keyframes tubeBubble {
-		0%, 100% { transform: translateY(0) scale(1); }
-		50% { transform: translateY(-2px) scale(1.1); }
-	}
-	
-	@keyframes starSpin {
-		0%, 100% { transform: rotate(0deg) scale(1); }
-		50% { transform: rotate(45deg) scale(1.1); }
-	}
 </style>
\ No newline at end of file