add in overshoot

QwikDev · Jan 15, 2025 · 203657d · 203657d
1 parent 3ea7bbc
commit 203657d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/apps/website/src/components/home/logo-hover/logo-hover.css b/apps/website/src/components/home/logo-hover/logo-hover.css
@@ -9,6 +9,22 @@
 .logo-hover {
   position: relative;
   width: fit-content;
+  --overshoot-easing-function: linear(
+    0,
+    0.402 7.4%,
+    0.711 15.3%,
+    0.929 23.7%,
+    1.008 28.2%,
+    1.067 33%,
+    1.099 36.9%,
+    1.12 41%,
+    1.13 45.4%,
+    1.13 50.1%,
+    1.111 58.5%,
+    1.019 83.2%,
+    1.004 91.3%,
+    1
+  );
 }
 
 .intro h1 span {
@@ -34,7 +50,8 @@
   scale: 0;
   left: 50%;
   top: 0;
-  transition: scale 200ms ease, opacity 200ms ease;
+  transition: scale 500ms var(--overshoot-easing-function), opacity 200ms
+    var(--overshoot-easing-function);
   pointer-events: none;
   background: var(--off-black);
   border: 1px solid white;

diff --git a/apps/website/src/icons/astro.tsx b/apps/website/src/icons/astro.tsx
@@ -5,6 +5,7 @@ export const AstroIcon = component$((props: PropsOf<"svg">) => {
     <svg
       aria-describedby="astro-tooltip"
       width="50"
+      height="50"
       viewBox="0 0 85 107"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"