Feat: Add animation to hero section

next.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
+    "gsap": "^3.11.4",
     "next": "13.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"

src/components/ui/Hero/Hero.jsx

@@ -1,32 +1,114 @@
+import { useEffect, useRef } from "react";
 import Image from "next/image";
+import { gsap } from "gsap";
 import styles from "./Hero.module.css";
 
 const Hero = () => {
+  const catRef = useRef(null);
+  const bubble1Ref = useRef(null);
+  const bubble2Ref = useRef(null);
+  const bubble3Ref = useRef(null);
+  const bubble4Ref = useRef(null);
+  const headerRef = useRef(null);
+  const subHeaderRef = useRef(null);
+  const didAnimate = useRef(false);
+
+  useEffect(() => {
+    if (didAnimate.current) {
+      return;
+    }
+
+    didAnimate.current = true;
+
+    let tl1 = gsap.timeline({ repeat: -1, yoyo: true });
+    let tl2 = gsap.timeline({ repeat: -1, yoyo: true });
+    let tlText = gsap.timeline();
+
+    // text and cat animation
+    tlText
+      .from(headerRef.current, {
+        duration: 0.8,
+        y: "100%",
+        clipPath: "polygon(0 0, 100% 0, 100% 0%, 0 0%)",
+        ease: "circ.out",
+      })
+      .from(subHeaderRef.current, {
+        duration: 0.8,
+        y: "100%",
+        clipPath: "polygon(0 0, 100% 0, 100% 0%, 0 0%)",
+        ease: "circ.out",
+      })
+      .from(catRef.current, { duration: 1.5, y: 100, ease: "circ.out" })
+      .from(
+        [
+          bubble1Ref.current,
+          bubble2Ref.current,
+          bubble3Ref.current,
+          bubble4Ref.current,
+        ],
+        { scale: 0, duration: 1.5 },
+        "<"
+      );
+
+    // bubble move animation
+    tl1
+      .to([bubble1Ref.current, bubble4Ref.current], {
+        y: -10,
+        ease: "power1.inOut",
+        duration: 2.5,
+      })
+      .to([bubble1Ref.current, bubble4Ref.current], {
+        y: 10,
+        ease: "power1.inOut",
+        duration: 2.5,
+      });
+
+    tl2
+      .to([bubble2Ref.current, bubble3Ref.current], {
+        y: 10,
+        ease: "power1.inOut",
+        duration: 2.5,
+      })
+      .to([bubble2Ref.current, bubble3Ref.current], {
+        y: -10,
+        ease: "power1.inOut",
+        duration: 2.5,
+      });
+  }, []);
+
   return (
     <section className={styles.hero}>
       <div className="text-center z-30">
-        <h1 className={styles.hero__header}>I am Hafez Fahmi</h1>
-        <p className="mb-8 text-3xl font-medium md:text-5xl 2xl:mb-16">
+        <h1 className={styles.hero__header} ref={headerRef}>
+          I am Hafez Fahmi
+        </h1>
+        <p className={styles.hero__subHeader} ref={subHeaderRef}>
           A Full-Stack{" "}
           <mark className={styles.hero__highlight}>JavaScript</mark>{" "}
           <br className="md:hidden" />
-          <span>Developer</span>
+          Developer
         </p>
       </div>
       <div className="flex justify-center relative">
         <div className={styles.cat__container}></div>
         <div className="relative block h-80 w-72 2xl:w-[480px] 2xl:h-[480px]">
-          <Image
-            src="/images/cat-wizard.png"
-            alt="Cat wizard"
-            fill
-            className="z-10 object-contain"
-          />
+          <div className="absolute bottom-0 overflow-hidden">
+            <Image
+              src="/images/cat-wizard.png"
+              alt="Cat wizard"
+              width={605}
+              height={707}
+              className="z-10 pointer-events-none"
+              ref={catRef}
+            />
+          </div>
+
           <div
             className={
               styles.bubble +
               " -top-14 -left-6 bg-main-yellow md:-top-6 md:-left-48 lg:-top-20 lg:-left-[340px] xl:-top-48 xl:-left-[420px] 2xl:-top-56 2xl:-left-[320px]"
             }
+            ref={bubble1Ref}
           >
             JavaScript
           </div>
@@ -35,6 +117,7 @@ const Hero = () => {
               styles.bubble +
               " top-4 left-8 bg-main-red md:-left-20 lg:top-4 lg:-left-40 xl:top-4 xl:-left-72 2xl:top-4 2xl:-left-56"
             }
+            ref={bubble2Ref}
           >
             Express.js
           </div>
@@ -43,6 +126,7 @@ const Hero = () => {
               styles.bubble +
               " -top-14 -right-6 bg-main-green  md:-top-6 md:-right-48 lg:-top-20 lg:-right-[340px] xl:-top-36 xl:-right-[420px] 2xl:-top-44 2xl:-right-80"
             }
+            ref={bubble3Ref}
           >
             Node.js
           </div>
@@ -51,6 +135,7 @@ const Hero = () => {
               styles.bubble +
               " top-4 right-8 bg-main-blue md:-right-20  lg:top-4 lg:-right-40  xl:-top-2 xl:-right-52 2xl:-top-8 2xl:-right-32"
             }
+            ref={bubble4Ref}
           >
             React
           </div>

src/components/ui/Hero/Hero.module.css

@@ -2,13 +2,21 @@
   @apply flex flex-col justify-center relative px-4 border-b-4 border-black;
 
   min-height: 100vh;
+  min-height: 100dvh;
 }
 
 .hero__header {
-  @apply mb-1 mt-8 text-6xl text-white font-extrabold tracking-wider md:text-8xl md:mb-3 md:tracking-normal;
+  @apply mb-1 text-6xl text-white font-extrabold tracking-wider md:text-8xl md:mb-3 md:tracking-normal xl:mt-8;
 
   -webkit-text-stroke: 2px #000;
   text-shadow: 3px 3px #000;
+  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
+}
+
+.hero__subHeader {
+  @apply mb-8 text-3xl font-medium md:text-5xl 2xl:mb-16;
+
+  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
 }
 
 .hero__highlight {