remove scale effect from hero text animation

Trombach · Sep 20, 2024 · 95bb126 · 95bb126
1 parent 48bb8be
commit 95bb126
Showing 1 changed file with 29 additions and 4 deletions.
diff --git a/src/components/Home/Hero/HeroText.astro b/src/components/Home/Hero/HeroText.astro
@@ -2,12 +2,21 @@
 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">
+<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:list={[
+      "flex items-center gap-5 [font-size:clamp(theme(fontSize.7xl),-4.25rem_+_28vw,theme(fontSize.9xl))]",
+      "motion-safe:animate-[slide-in-no-scale_0.75s_both] motion-safe:ease-[cubic-bezier(0.250,0.460,0.450,0.940)] motion-safe:animation-delay-300",
+    ]}
   >
     <span>
-      <div class="[font-size:clamp(theme(fontSize.4xl),-1.5rem_+_12vw,theme(fontSize.6xl));]">Hi there <Wave /></div>
+      <div
+        class="[font-size:clamp(theme(fontSize.4xl),-1.5rem_+_12vw,theme(fontSize.6xl));]"
+      >
+        Hi there <Wave />
+      </div>
       I'm <span
         class="font-bold bg-gradient-to-r from-primary to-primary-pink bg-clip-text text-transparent"
       >
@@ -16,9 +25,25 @@ 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:list={[
+      "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_0.75s_both] motion-safe:ease-[cubic-bezier(0.250,0.460,0.450,0.940)] motion-safe:animation-delay-500",
+    ]}
   >
     Software Developer <br />
     Researcher
   </p>
 </div>
+
+<style>
+  @keyframes slide-in-no-scale {
+    from {
+      transform: translateY(100px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+</style>