Centered goop

src/components/Controls.module.css

@@ -30,7 +30,7 @@
   height: 100%;
 }
 
-.gooWrapper {
+.gooey {
   filter: url('#goo');
 }
 
@@ -38,7 +38,6 @@
 .blob {
   position: absolute;
   left: 50%;
-  transform: translateX(-50%);
   cursor: pointer;
 }
 
@@ -50,6 +49,7 @@
   height: auto;
   padding: var(--gap-sm);
   box-sizing: border-box;
+  transform: translateX(-50%);
 }
 
 .control>img {
@@ -60,14 +60,15 @@
   background: var(--clr-bg);
   border-radius: 20px;
   aspect-ratio: 1/1;
-  transition: width .6s, height .6s, transform .6s;
+  transition: transform .6s;
-  width: 0;
+  width: 64px;
-  height: 0;
+  height: 64px;
+  transform-origin: 0;
+  transform: scale(0) translateX(-50%);
 }
 
 .selected {
-  width: 64px;
+  transform: scale(1) translateX(-50%);
-  height: 64px;
 }
 
 .control:nth-child(2),
@@ -101,6 +102,14 @@
   .blob {
     top: 0;
     left: 0;
+  }
+
+  .blob {
+    transform: scale(0);
+    transform-origin: center;
+  }
+
+  .control {
     transform: translateX(0);
   }
 
@@ -121,4 +130,8 @@
     top: unset;
     left: calc(var(--blob-distance) * 2);
   }
+
+  .selected {
+    transform: scale(1);
+  }
 }

src/components/Controls.tsx

@@ -29,6 +29,8 @@ export default () => {
     }
   }
 
+  const gooey = true;
+
   createEffect((prev) => {
     if (prev !== state.visibleChapter()) {
       selectChapter(state.visibleChapter());
@@ -40,7 +42,12 @@ export default () => {
     <>
       <div class={styles.Controls}>
         <div class={styles.chapters}>
-          <div class={styles.gooWrapper}>
+          <div
+            class={styles.gooWrapper}
+            classList={{
+              [styles.gooey]: gooey
+            }}
+          >
             <For each={chapters}>{(chapter) =>
               <div
                 class={styles.blob}