update hero text animation

Trombach · Sep 19, 2024 · 323a46a · 323a46a
1 parent 8a59b47
commit 323a46a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/Home/Hero/HeroText.astro b/src/components/Home/Hero/HeroText.astro
@@ -4,7 +4,7 @@ import Wave from "./Wave.astro";
 
 <div class="z-10 mx-5 sm:mx-auto -mt-20 flex h-full flex-col justify-center space-y-10">
   <h1
-    class="flex items-center gap-5 [font-size:clamp(theme(fontSize.7xl),-4.25rem_+_28vw,theme(fontSize.9xl))] motion-safe:animate-slide-in motion-safe:animation-delay-300"
+    class="flex items-center gap-5 [font-size:clamp(theme(fontSize.7xl),-4.25rem_+_28vw,theme(fontSize.9xl))] motion-safe:animate-slide-in-no-scale motion-safe:animation-delay-300"
   >
     <span>
       <div class="[font-size:clamp(theme(fontSize.4xl),-1.5rem_+_12vw,theme(fontSize.6xl));]">Hi there <Wave /></div>
@@ -16,7 +16,7 @@ import Wave from "./Wave.astro";
     </span>
   </h1>
   <p
-    class="border-l-4 border-foreground pl-2 font-mono [font-size:clamp(theme(fontSize.xl),-0.3125rem_+_5vw,theme(fontSize.3xl));] motion-safe:animate-slide-in motion-safe:animation-delay-500"
+    class="border-l-4 border-foreground pl-2 font-mono [font-size:clamp(theme(fontSize.xl),-0.3125rem_+_5vw,theme(fontSize.3xl));] motion-safe:animate-slide-in-no-scale motion-safe:animation-delay-500"
   >
     Software Developer <br />
     Researcher

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -57,10 +57,22 @@ module.exports = {
             opacity: 1,
           },
         },
+        "slide-in-no-scale": {
+          from: {
+            transform: "translateY(100px)",
+            opacity: 0,
+          },
+          to: {
+            transform: "translateY(0)",
+            opacity: 1,
+          },
+        },
       },
       animation: {
         "slide-in":
           "slide-in-bottom 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both",
+        "slide-in-no-scale":
+          "slide-in-no-scale 0.75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both",
       },
       fontFamily: {
         sans: ["Inter Variable", ...defaultTheme.fontFamily.sans],