feat: Implement Animations for landing page

src/components/landing/HeroSection.astro

@@ -125,23 +125,22 @@ import ArrowDown from "../icons/ArrowDown.astro";
   const heroSection = document.querySelector(".hero");
 
   if (heroSection) {
-    const timeline = gsap.timeline().pause();
+    const tl = gsap.timeline().pause();
 
-    timeline.from(heroSection.querySelector(".image"), {
-      duration: 2,
-      opacity: 0,
-      // yPercent: 20,
-      ease: "expo.out",
-    });
+    tl.addLabel("heading", 0);
+    tl.addLabel("image", 0.2);
+    tl.addLabel("text", 0.8);
+    tl.addLabel("arrow", 1.5);
 
-    timeline.from(
-      heroSection.querySelector(".down"),
+    tl.from(
+      heroSection.querySelector(".image"),
       {
-        duration: 1,
+        duration: 2,
         opacity: 0,
+        xPercent: 10,
         ease: "expo.out",
       },
-      // ">-1",
+      "image",
     );
 
     new SplitText(heroSection.querySelector("h1"), {
@@ -150,7 +149,7 @@ import ArrowDown from "../icons/ArrowDown.astro";
       mask: "chars",
       charsClass: "char",
       onSplit: (self) => {
-        timeline.from(
+        tl.from(
           self.chars,
           {
             duration: 1,
@@ -158,8 +157,9 @@ import ArrowDown from "../icons/ArrowDown.astro";
             scale: 1.2,
             stagger: 0.015,
             ease: "expo.out",
+            onComplete: () => self.revert(),
           },
-          ">-2.8",
+          "heading",
         );
       },
     });
@@ -170,19 +170,29 @@ import ArrowDown from "../icons/ArrowDown.astro";
       mask: "lines",
       linesClass: "line",
       onSplit: (self) => {
-        timeline
-          .from(
-            self.lines,
-            {
-              duration: 0.9,
-              yPercent: 105,
-              stagger: 0.06,
-              ease: "expo.out",
-            },
-            ">-1",
-          )
-          .play();
+        tl.from(
+          self.lines,
+          {
+            duration: 0.9,
+            yPercent: 105,
+            stagger: 0.06,
+            ease: "expo.out",
+            onComplete: () => self.revert(),
+          },
+          "text",
+        ).play();
       },
     });
+
+    tl.from(
+      heroSection.querySelector(".down"),
+      {
+        duration: 1,
+        opacity: 0,
+        translateY: "-100%",
+        ease: "bounce.out",
+      },
+      "arrow",
+    );
   }
 </script>