animations / about section

components/home-page/Header.vue

@@ -4,13 +4,13 @@
     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="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"
+        id="motion"
         cx="429"
         cy="429"
         r="427.5"
@@ -33,8 +33,8 @@
       </defs>
     </svg>
 
-    <!-- <svg
-      class="arrow absolute h-[4.167vw] w-[4.167vw] rotate-180 lg:!top-[34vw]"
+    <svg
+      class="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"
@@ -48,7 +48,7 @@
         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> -->
+    </svg>
 
     <h1
       class="text-[7.277vw] lg:text-[3.718vw] font-[700] mt-[100px] lg:mt-[120px] lg:mt-[9.115vw]"
@@ -87,18 +87,34 @@ onMounted(() => {
         start: "center center",
         end: "+=5000",
       },
-      rotation: 500,
+      rotation: -800,
       duration: 3,
       ease: "none",
-    }),
-      gsap.to(".animate #motion", {
-        strokeDashoffset: -300,
-        repeat: -1,
-        ease: "none",
-        duration: 5,
-      })
-
+    });
+    gsap.to(".animate #motion", {
+      strokeDashoffset: 300,
+      repeat: -1,
+      ease: "none",
+      duration: 5,
+    });
+    gsap.to(".arrow", {
+      strokeDashoffset: 300,
+    x: 700,
+     y: -130,
+     rotation: -90,
+      scrollTrigger: {
+        trigger: ".transform-bubbles",
+        scrub: 1,
+        start: "center center",
+        end: "+=5000",
+      },
+      //  motionPath: {
+      //   path: "#pathes",
+      //   align: "#pathes",
+      //   alignOrigin: [0.5, 0.5],
+      //   autoRotate: 180,
+      // },
+    });
   });
 });
-
 </script>