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>

components/home-page/Slider.vue

@@ -22,8 +22,6 @@
       <span class="text-[2.836vw] lg:text-[0.833vw] font-[400]">تومان</span>
     </p>
 
-
-
     <div class="absolute">
       <div
         ref="start"
@@ -46,6 +44,7 @@
             stroke-dasharray="8 8"
           />
         </svg>
+ 
         <svg
           class="big absolute"
           width="75.365vw"
@@ -54,6 +53,8 @@
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
+
+          
           <circle
             cx="723.5"
             cy="723.5"
@@ -62,6 +63,12 @@
             stroke-width="2"
             stroke-dasharray="8 8"
           />
+          <!-- <svg
+          class=" !absolute !mt-[74.5vw] !me-[10vw] rotate-[-12deg]"
+          width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M45.9902 36.675L45.9902 23.325C45.9902 15.025 40.1115 11.65 32.9319 15.775L29.7298 17.625C28.9543 18.075 28.479 18.9 28.479 19.8L28.479 40.2C28.479 41.1 28.9543 41.925 29.7298 42.375L32.9319 44.225C40.1115 48.35 45.9902 44.975 45.9902 36.675Z" fill="#383E43"/>
+            <path d="M25.9775 38.025L25.9775 21.95C25.9775 20.975 24.9269 20.375 24.1013 20.875L21.3496 22.475C14.17 26.6 14.17 33.4 21.3496 37.525L24.1013 39.125C24.9269 39.6 25.9775 39 25.9775 38.025Z" fill="#383E43"/>
+            </svg> -->
         </svg>
       </div>
     </div>