completed animations on desktop size

components/home-page/Header.vue

@@ -4,7 +4,38 @@
     class="!max-w-[100vw] transform-bubbles header h-[76.923vw] lg:h-[48.802vw] text-white flex flex-col items-center"
   >
     <svg
-      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]"
+      class="flex md:hidden absolute animate rotating-mobile rotating"
+      width="390"
+      height="239"
+      viewBox="0 0 390 239"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        id="motion"
+        cx="195"
+        cy="4"
+        r="234.5"
+        stroke="url(#paint0_linear_1248_31458)"
+        stroke-dasharray="5 5"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1248_31458"
+          x1="195"
+          y1="-231"
+          x2="195"
+          y2="239"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.499986" stop-color="white" stop-opacity="0" />
+          <stop offset="1" stop-color="white" />
+        </linearGradient>
+      </defs>
+    </svg>
+
+    <svg
+      class="hidden md:flex rotating-bubbles animate absolute rotating -top-[50.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"
@@ -32,9 +63,20 @@
         </linearGradient>
       </defs>
     </svg>
+    <svg class="block md:hidden h-[9.744vw] w-[9.744vw] absolute top-[55vw]" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="19" cy="19" r="19" fill="white"/>
+      <path d="M13.5 16.5526V21.4476C13.5 24.4909 15.6542 25.7284 18.285 24.2159L19.4583 23.5376C19.7425 23.3726 19.9167 23.0701 19.9167 22.7401V15.2601C19.9167 14.9301 19.7425 14.6276 19.4583 14.4626L18.285 13.7842C15.6542 12.2717 13.5 13.5092 13.5 16.5526Z" fill="#383E43"/>
+      <path d="M20.833 16.0574V21.9516C20.833 22.3091 21.218 22.5291 21.5205 22.3458L22.5288 21.7591C25.1597 20.2466 25.1597 17.7533 22.5288 16.2408L21.5205 15.6541C21.218 15.4799 20.833 15.6999 20.833 16.0574Z" fill="#383E43"/>
+      </svg>
+      
 
+
+
+
+
+      
     <svg
-      class="arrow absolute h-[4.167vw] w-[4.167vw] lg:!top-[33.75vw]"
+      class="hidden md:block arrow absolute h-[4.167vw] w-[4.167vw] lg:!top-[33.75vw]"
       viewBox="0 0 80 80"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -80,6 +122,7 @@ let ctx;
 
 onMounted(() => {
   ctx = gsap.context((self) => {
+
     gsap.to(".rotating-bubbles", {
       scrollTrigger: {
         trigger: ".transform-bubbles",
@@ -91,6 +134,18 @@ onMounted(() => {
       duration: 3,
       ease: "none",
     });
+    gsap.to(".rotating-mobile", {
+      scrollTrigger: {
+        trigger: ".transform-bubbles",
+        scrub: 1,
+        start: "center center",
+        end: "+=200",
+      },
+      rotation: 0,
+      duration: 3,
+      ease: "none",
+    });
+
     gsap.to(".animate #motion", {
       strokeDashoffset: 300,
       repeat: -1,
@@ -99,9 +154,9 @@ onMounted(() => {
     });
     gsap.to(".arrow", {
       strokeDashoffset: 300,
-    x: 700,
-     y: -130,
-     rotation: -90,
+      x: 700,
+      y: -130,
+      rotation: -90,
       scrollTrigger: {
         trigger: ".transform-bubbles",
         scrub: 1,