diff --git a/src/components/Controls.module.css b/src/components/Controls.module.css index 8149a53..b4566d6 100644 --- a/src/components/Controls.module.css +++ b/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; - width: 0; - height: 0; + transition: transform .6s; + width: 64px; + height: 64px; + transform-origin: 0; + transform: scale(0) translateX(-50%); } .selected { - width: 64px; - height: 64px; + transform: scale(1) translateX(-50%); } .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); + } } \ No newline at end of file diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx index bc4037f..9257970 100644 --- a/src/components/Controls.tsx +++ b/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 () => { <>
-
+
{(chapter) =>