animations / add GSAP package

components/home-page/Header.vue

@@ -1,17 +1,16 @@
 
 <template>
   <div
-    class="header h-[76.923vw] lg:h-[48.802vw] text-white flex flex-col items-center"
+    class="!max-w-[100vw] transform-bubbles header h-[76.923vw] lg:h-[48.802vw] text-white flex flex-col items-center"
   >
- 
-    
     <svg
-      class="animate absolute rotating -top-[59.231vw] lg:-top-[8.8vw] h-[120.513vw] lg:h-[44.688vw] w-[100vw] lg:w-[44.688vw]"
+      class="hidden lg:flex rotating-bubbles animate absolute rotating -top-[59.231vw] lg:!-top-[8.8vw] h-[120.513vw] lg:h-[44.688vw] w-[95%] !overflow-x-hidden  lg:w-[44.688vw]"
       viewBox="0 0 858 858"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <circle
+      id="motion"
         cx="429"
         cy="429"
         r="427.5"
@@ -34,6 +33,23 @@
       </defs>
     </svg>
 
+    <!-- <svg
+      class="arrow absolute h-[4.167vw] w-[4.167vw] rotate-180 lg:!top-[34vw]"
+      viewBox="0 0 80 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="40" cy="40" r="40" fill="white" />
+      <path
+        d="M27.5 34.4375V45.5625C27.5 52.4792 32.3958 55.2917 38.375 51.8542L41.0417 50.3125C41.6875 49.9375 42.0833 49.25 42.0833 48.5V31.5C42.0833 30.75 41.6875 30.0625 41.0417 29.6875L38.375 28.1458C32.3958 24.7083 27.5 27.5208 27.5 34.4375Z"
+        fill="#383E43"
+      />
+      <path
+        d="M44.167 33.3125V46.7083C44.167 47.5208 45.042 48.0208 45.7295 47.6042L48.0212 46.2708C54.0003 42.8333 54.0003 37.1667 48.0212 33.7292L45.7295 32.3958C45.042 32 44.167 32.5 44.167 33.3125Z"
+        fill="#383E43"
+      />
+    </svg> -->
+
     <h1
       class="text-[7.277vw] lg:text-[3.718vw] font-[700] mt-[100px] lg:mt-[120px] lg:mt-[9.115vw]"
     >
@@ -52,4 +68,37 @@
 </template>
 
 <script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+import { MotionPathPlugin } from "gsap/MotionPathPlugin";
+gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
+
+const main = ref();
+let ctx;
+
+onMounted(() => {
+  ctx = gsap.context((self) => {
+    gsap.to(".rotating-bubbles", {
+      scrollTrigger: {
+        trigger: ".transform-bubbles",
+        scrub: 1,
+        start: "center center",
+        end: "+=5000",
+      },
+      rotation: 500,
+      duration: 3,
+      ease: "none",
+    }),
+      gsap.to(".animate #motion", {
+        strokeDashoffset: -300,
+        repeat: -1,
+        ease: "none",
+        duration: 5,
+      })
+
+  });
+});
+
 </script>