fixed animation bugs

components/about-page/Header.vue

@@ -1,7 +1,7 @@
 <template>
-  <section class="hidden md:block image-unmask">
+  <section class="image-unmask h-[100vh]">
     <div
-      class="autoHide absolute z-[100] left-[37.5vw] top-[20vw] text-[2.656vw] w-[25vw] text-center"
+      class="text-black autoHide absolute z-[100] left-[9vw] md:left-[37.5vw] text-[7.277vw] md:text-[2.656vw] top-[44vh] md:top-[41vh] w-[80vw] md:w-[25vw] text-center"
     >
       We
       <span class="font-bold"> Believe </span>
@@ -12,10 +12,10 @@
     <svg id="svg">
       <defs>
         <mask id="mask">
-          <rect width="100vw" height="100vw" fill="white"></rect>
+          <rect width="100vw" height="100vh" fill="white"></rect>
 
           <rect
-            class="border rounded-[10vw]"
+            class="hidden md:block border rounded-[10vw]"
             id="circle1"
             x="-10%"
             y="14%"
@@ -25,7 +25,7 @@
           />
 
           <rect
-            class="border rounded-[10vw]"
+            class="hidden md:block border rounded-[10vw]"
             id="circle2"
             x="15%"
             y="14%"
@@ -34,7 +34,7 @@
             rx="10vw"
           />
           <rect
-            class="border rounded-[10vw]"
+            class="hidden md:block border rounded-[10vw]"
             id="circle3"
             x="40%"
             y="14%"
@@ -44,7 +44,7 @@
           />
 
           <rect
-            class="border rounded-[10vw]"
+            class="hidden md:block border rounded-[10vw]"
             id="circle4"
             x="65%"
             y="14%"
@@ -54,7 +54,7 @@
           />
 
           <rect
-            class="border rounded-[10vw]"
+            class="hidden md:block border rounded-[10vw]"
             id="circle5"
             x="90%"
             y="14%"
@@ -62,6 +62,34 @@
             height="34vw"
             rx="10vw"
           />
+
+          <rect
+            class="block md:hidden thickborder rounded-[20vw]"
+            id="circleRes1"
+            x="87%"
+            y="25%"
+            width="50vw"
+            height="50vh"
+            rx="25vw"
+          />
+          <rect
+            class="block md:hidden thickborder rounded-[20vw]"
+            id="circleRes2"
+            x="24%"
+            y="25%"
+            width="50vw"
+            height="50vh"
+            rx="25vw"
+          />
+          <rect
+            class="block md:hidden thickborder rounded-[20vw]"
+            id="circleRes3"
+            x="-39%"
+            y="25%"
+            width="50vw"
+            height="50vh"
+            rx="25vw"
+          />
         </mask>
       </defs>
       <rect
@@ -75,15 +103,13 @@
   </section>
 
   <section class="content">
-    <div class="h-[94.615vw] lg:h-[42.938vw] flex items-center text-[#383E43]">
+    <div class="h-[40vw] md:h-[35vw] flex text-[#383E43]">
       <div class="text w-[60%] md:w-[37%] ms-[4vw] md:ms-[23.594vw]">
-        <h2
+        <h2 class="-mt-[2vw] text-[4.544vw] md:text-[1.481vw] font-bold">
-          class="-mt-[2vw] md:mt-[10vw] lg:mt-0 text-[4.544vw] lg:text-[1.481vw] font-bold"
-        >
           داستان ما
         </h2>
         <p
-          class="text-[3.19vw] lg:text-[0.833vw] leading-[4.5vw] lg:leading-[1.563vw] mt-[2vw]"
+          class="text-[3.19vw] md:text-[0.833vw] leading-[4.5vw] md:leading-[1.563vw] mt-[2vw]"
         >
           <span>
             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
@@ -95,39 +121,41 @@
           </span>
         </p>
         <p
-          class="hidden lg:block text-[3.19vw] lg:text-[0.833vw] leading-[1.563vw] mt-[2vw]"
+          class="hidden md:block text-[3.19vw] md:text-[0.833vw] leading-[1.563vw] mt-[2vw]"
         >
-        <span>
+          <span>
-          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
-          استفاده از طراحان گرافیک است، چاپگرها
+            استفاده از طراحان گرافیک است، چاپگرها
-        </span>
+          </span>
-        <span>
+          <span>
-          لورم ایپسوم متن ساختگی با تولید سادگی نامفهو  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهو لورم ایپسوم متن ساختگی
-          استفاده از طراحان گرافیک است، چاپگرهام از صنعت چاپ، و با
+            با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک
-          استفاده از طراحان گرافیک است، چاپگرها
+            است، چاپگرهام از صنعت چاپ، و با استفاده از طراحان گرافیک است،
-        </span>
+            چاپگرها
-        <span>
+          </span>
-          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+          <span>
-          استفاده از طراحان گرافیک است، چاپگرها
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
-        </span>
+            استفاده از طراحان گرافیک است، چاپگرها
-        <span>
+          </span>
-          لورم ایپسوم متن ساختگی با تولید سادگی نامفهو  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+          <span>
-          استفاده از طراحان گرافیک است، چاپگرهام از صنعت چاپ، و با
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهو لورم ایپسوم متن ساختگی
-          استفاده از طراحان گرافیک است، چاپگرها
+            با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک
-        </span>
+            است، چاپگرهام از صنعت چاپ، و با استفاده از طراحان گرافیک است،
-        <span>
+            چاپگرها
-          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+          </span>
-          استفاده از طراحان گرافیک است، چاپگرها
+          <span>
-        </span>
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
-        <span>
+            استفاده از طراحان گرافیک است، چاپگرها
-          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+          </span>
-          استفاده از طراحان گرافیک است، چاپگرها
+          <span>
-        </span>
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
-        <span>
+            استفاده از طراحان گرافیک است، چاپگرها
-          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+          </span>
-          استفاده از طراحان گرافیک است، چاپگرها از صنعت چاپ، و با
+          <span>
-          استفاده از طراحان گرافیک است، چاپگرها
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی
-        </span>
+            با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک
+            است، چاپگرها از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها
+          </span>
           <span>
             در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را
             می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
@@ -136,11 +164,10 @@
             الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این
             صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
           </span>
- 
         </p>
       </div>
     </div>
-    <div class="fade"></div>
+    <div class="fade !mt-[10vw]"></div>
   </section>
   <img id="img-fixed" src="/public/images/aboutBg.jpg" />
 </template>
@@ -218,6 +245,42 @@ onMounted(() => {
     let spaceIntX5 = parseInt(spaceX5);
     let spaceIntY5 = parseInt(spaceY5);
 
+    const circleRes1 = document.querySelector("#circleRes1");
+    let heightRes1 = circleRes1.getAttribute("height");
+    let widthRes1 = circleRes1.getAttribute("width");
+    let spaceResX1 = circleRes1.getAttribute("x");
+    let spaceResY1 = circleRes1.getAttribute("y");
+    let rxRes1 = circleRes1.getAttribute("rx");
+    let rxIntRes1 = parseInt(rxRes1);
+    let heightIntRes1 = parseInt(heightRes1);
+    let widthIntRes1 = parseInt(widthRes1);
+    let spaceIntResX1 = parseInt(spaceResX1);
+    let spaceIntResY1 = parseInt(spaceResY1);
+
+    const circleRes2 = document.querySelector("#circleRes2");
+    let heightRes2 = circleRes2.getAttribute("height");
+    let widthRes2 = circleRes2.getAttribute("width");
+    let spaceResX2 = circleRes2.getAttribute("x");
+    let spaceResY2 = circleRes2.getAttribute("y");
+    let rxRes2 = circleRes2.getAttribute("rx");
+    let rxIntRes2 = parseInt(rxRes2);
+    let heightIntRes2 = parseInt(heightRes2);
+    let widthIntRes2 = parseInt(widthRes2);
+    let spaceIntResX2 = parseInt(spaceResX2);
+    let spaceIntResY2 = parseInt(spaceResY2);
+
+    const circleRes3 = document.querySelector("#circleRes3");
+    let heightRes3 = circleRes3.getAttribute("height");
+    let widthRes3 = circleRes3.getAttribute("width");
+    let spaceResX3 = circleRes3.getAttribute("x");
+    let spaceResY3 = circleRes3.getAttribute("y");
+    let rxRes3 = circleRes3.getAttribute("rx");
+    let rxIntRes3 = parseInt(rxRes3);
+    let heightIntRes3 = parseInt(heightRes3);
+    let widthIntRes3 = parseInt(widthRes3);
+    let spaceIntResX3 = parseInt(spaceResX3);
+    let spaceIntResY3 = parseInt(spaceResY3);
+
     const rect = document.querySelector("#rect");
     const pad = 4;
 
@@ -240,8 +303,9 @@ onMounted(() => {
           trigger: ".image-unmask",
           pin: true,
           start: "top top",
-          end: "+=500",
+          //end: "+=100",
-          //end: "bottom bottom",
+          end: "bottom 20%",
+          ease: "slow(0.7,0.7,false)",
           scrub: true,
         },
         defaults: {
@@ -315,6 +379,46 @@ onMounted(() => {
         },
         0
       )
+      .to(
+        circleRes1,
+        {
+          attr: {
+            height: () => heightIntRes1 * 10 + "vh",
+            width: () => widthIntRes1 * 10 + "vw",
+            x: () => spaceIntResX1 * 3.6 + "%",
+            y: () => spaceIntResY1 - (heightIntRes1 * 10) / 3 + "%",
+            rx: () => rxIntRes1 * 10 + "vw",
+          },
+        },
+        0
+      )
+      .to(
+        circleRes2,
+        {
+          attr: {
+            height: () => heightIntRes2 * 10 + "vh",
+            width: () => widthIntRes2 * 10 + "vw",
+            x: () => spaceIntResX2 * -8 + "%",
+            y: () => spaceIntResY2 - (heightIntRes2 * 10) / 3 + "%",
+            rx: () => rxIntRes2 * 10 + "vw",
+          },
+        },
+        0
+      )
+
+      .to(
+        circleRes3,
+        {
+          attr: {
+            height: () => heightIntRes3 * 10 + "vh",
+            width: () => widthIntRes3 * 10 + "vw",
+            x: () => spaceIntResX3 * 18 + "%",
+            y: () => spaceIntResY3 - (heightIntRes3 * 10) / 3 + "%",
+            rx: () => rxIntRes3 * 10 + "vw",
+          },
+        },
+        0
+      )
 
       .to(
         img,
@@ -342,48 +446,48 @@ onMounted(() => {
       },
     });
 
-    window.addEventListener("load", init);
+    // window.addEventListener("load", init);
-    window.addEventListener("resize", resize);
+    // window.addEventListener("resize", resize);
 
-    function init() {
+    // function init() {
-      imgWidth = img.naturalWidth;
+    //   imgWidth = img.naturalWidth;
-      imgHeight = img.naturalHeight;
+    //   imgHeight = img.naturalHeight;
 
-      resize();
+    //   resize();
-    }
+    // }
 
-    function resize() {
+    // function resize() {
-      tl.progress(0);
+    //   tl.progress(0);
 
-      const r = svg.getBoundingClientRect();
+    //   const r = svg.getBoundingClientRect();
-      const rectWidth = r.width + pad;
+    //   const rectWidth = r.width + pad;
-      const rectHeight = r.height + pad;
+    //   const rectHeight = r.height + pad;
 
-      const rx = rectWidth / imgWidth;
+    //   const rx = rectWidth / imgWidth;
-      const ry = rectHeight / imgHeight;
+    //   const ry = rectHeight / imgHeight;
 
-      const ratio = Math.max(rx, ry);
+    //   const ratio = Math.max(rx, ry);
 
-      const width = imgWidth * ratio;
+    //   const width = imgWidth * ratio;
-      const height = imgHeight * ratio;
+    //   const height = imgHeight * ratio;
 
-      const dx = rectWidth / 2;
+    //   const dx = rectWidth / 2;
-      const dy = rectHeight / 2;
+    //   const dy = rectHeight / 2;
-      radius = Math.sqrt(dx * dx + dy * dy);
+    //   radius = Math.sqrt(dx * dx + dy * dy);
 
-      gsap.set(img, { width, height });
+    //   gsap.set(img, { width, height });
-      gsap.set(imgFixed, { width, height });
+    //   gsap.set(imgFixed, { width, height });
 
-      tl.invalidate();
+    //   tl.invalidate();
 
-      ScrollTrigger.refresh();
+    //   ScrollTrigger.refresh();
-    }
+    // }
     const timeline = gsap.timeline({
       scrollTrigger: {
         trigger: ".autoHide", // What element triggers the scroll
         scrub: true, // Add a small delay of scrolling and animation. `true` is direct
         start: "center center", // Can be top, center, bottom
-        end: "center", // Can be top, center, bottom
+        end: "top", // Can be top, center, bottom
         pin: true,
       },
     });
@@ -397,7 +501,6 @@ onMounted(() => {
         stagger
       );
   });
-
 });
 </script>
 
@@ -414,8 +517,12 @@ body {
   padding: 0;
 }
 .border {
-  outline: 0.3vw solid red;
+  outline: 0.3vw solid !important;
-  outline-offset: 0.8vw;
+  outline-offset: 0.8vw !important;
+}
+.thickborder {
+  outline: 1vw solid !important;
+  outline-offset: 2vw !important;
 }
 section.spacer {
   height: 100vh;
@@ -466,6 +573,24 @@ section.image-unmask {
   opacity: 0;
   z-index: -1;
 }
+@media (max-width: 768px) {
+  #img {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    height: 100%;
+    opacity: 0.8;
+    z-index: -1;
+  }
+  #img-fixed {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    height: 100%;
+    opacity: 0;
+    z-index: -1;
+  }
+}
 .text span {
   background: linear-gradient(
     to left,

components/about-page/Map.vue

@@ -44,8 +44,8 @@
           </div>
         </div>
       </div>
-      <div class="w-full md:w-[35%] rounded-[1.302vw]">
+      <div class="w-full md:w-[35%] rounded-[1.302vw] min-h-[50vh]">
-        <LMap
+         <LMap
           class="rounded-lg"
           ref="map"
           :zoom="zoom"
@@ -62,3 +62,6 @@
     </div>
   </div>
 </template>
+<script setup>
+const zoom = ref(16)
+</script>

components/home-page/AboutUs.vue

@@ -234,10 +234,11 @@ onMounted(() => {
       scrollTrigger: {
         trigger: ".panel",
         start: "top center",
+        end: "+=50"
       },
       strokeDashoffset: 300,
       repeat: 1,
-      ease: "none",
+      ease: "slow(0.7,0.7,false)",
       duration: 5,
     });
 
@@ -273,7 +274,7 @@ onMounted(() => {
   const tl = gsap.timeline({
         defaults: {
         duration: 1,
-        ease: "power1.inOut",
+        ease: "slow(0.7,0.7,false)",
       },
     scrollTrigger: {
       trigger: ".about",

components/home-page/Header.vue

@@ -4,7 +4,7 @@
     class="!max-w-[100vw] transform-bubbles header h-[76.923vw] md:h-[48.802vw] text-white flex flex-col items-center"
   >
     <svg
-      class="flex md:hidden absolute animate rotating-mobile rotating"
+      class="flex md:hidden absolute animate rotateSvg"
       width="100vw"
       height="58vw"
       viewBox="0 0 390 239"
@@ -34,6 +34,23 @@
       </defs>
     </svg>
 
+    <svg
+      class="mobileArrow block md:hidden h-[9.744vw] w-[9.744vw] absolute mt-[53vw]"
+      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="hidden md:flex rotating-bubbles animate absolute rotating -top-[50.231vw] md:!-top-[8.8vw] h-[120.513vw] md:h-[44.688vw] w-[95%] !overflow-x-hidden md:w-[44.688vw]"
       viewBox="0 0 858 858"
@@ -64,18 +81,6 @@
       </defs>
     </svg>
 
-    <svg class="block md:hidden h-[9.744vw] w-[9.744vw] absolute mt-[53vw]" 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="hidden md:block arrow absolute h-[4.167vw] w-[4.167vw] md:!top-[33.75vw]"
       viewBox="0 0 80 80"
@@ -123,7 +128,6 @@ let ctx;
 
 onMounted(() => {
   ctx = gsap.context((self) => {
-
     gsap.to(".rotating-bubbles", {
       scrollTrigger: {
         trigger: ".transform-bubbles",
@@ -131,20 +135,9 @@ onMounted(() => {
         start: "center center",
         end: "+=5000",
       },
-      rotation: -800,
+      rotation: -600,
       duration: 3,
-      ease: "none",
+      ease: "slow(0.7,0.7,false)",
-    });
-    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", {
@@ -164,13 +157,20 @@ onMounted(() => {
         start: "center center",
         end: "+=5000",
       },
-      //  motionPath: {
-      //   path: "#pathes",
-      //   align: "#pathes",
-      //   alignOrigin: [0.5, 0.5],
-      //   autoRotate: 180,
-      // },
     });
   });
+  gsap.to(".mobileArrow", {
+    strokeDashoffset: 300,
+    x: 700,
+    y: -100,
+    rotation: -90,
+    scrollTrigger: {
+      trigger: ".transform-bubbles",
+      scrub: 1,
+      start: "center 20%",
+      end: "+=5000",
+    },
+  });
+
 });
 </script>

components/home-page/MediaSlider.vue

@@ -13,16 +13,16 @@
         </p>
         <div class="hidden md:flex h-[50px] me-[0.5vw]">
           <svg
-          class="cursor-pointer "
+          class="cursor-pointer h-[2.604vw] w-[2.604vw]"
           @click="this.$refs.carousel.next()"
-          width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+ viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
             <circle cx="25" cy="25" r="24.5" transform="rotate(-180 25 25)" stroke="#878787"/>
             <path d="M22.0002 17.0799L28.5202 23.5999C29.2902 24.3699 29.2902 25.6299 28.5202 26.3999L22.0002 32.9199" stroke="#878787" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
             <svg
-            class="cursor-pointer ms-[0.5vw]"
+            class="cursor-pointer ms-[0.5vw] h-[2.604vw] h-[2.604vw]"
             @click="this.$refs.carousel.prev()"
-            width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+     viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
               <circle cx="25" cy="25" r="24.5" stroke="#383E43"/>
               <g clip-path="url(#clip0_836_14507)">
               <path d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801" stroke="#383E43" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
@@ -122,9 +122,7 @@
         >
           ادامه مطلب
           <svg
-            class="ms-3"
+            class="ms-3 h-[1.25vw] w-[1.25vw]"
-            width="24"
-            height="24"
             viewBox="0 0 24 24"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"

components/home-page/RoadMap.vue

@@ -50,13 +50,13 @@
       </svg>
 
       <svg
-        class="motionPath block absolute md:hidden mt-[20vw] w-[98vw] h-[359.487vw]"
+        class="mobileMotionPath block absolute md:hidden mt-[20vw] w-[98vw] h-[359.487vw]"
         viewBox="0 0 390 1402"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          id="motionPath"
+          id="mobileMotionPath"
           d="M195.25 -8.51273e-06L195.211 9.21222C195.094 36.7434 172.743 59 145.212 59L50 59C22.3858 59 5.86356e-05 81.3858 5.88568e-05 109L6.27834e-05 599C6.30047e-05 626.614 22.3858 649 50.0001 649L339.999 649C367.613 649 389.999 671.386 389.999 699L389.999 1238C389.999 1265.61 367.613 1288 339.999 1288L245 1288C217.386 1288 195 1310.39 195 1338L195 1402"
           stroke="#383E43"
           stroke-dasharray="5 5"
@@ -64,8 +64,8 @@
       </svg>
 
       <svg
-        class="block md:hidden box z-[1] absolute mt-[8vw] h-[15.385vw] w-[15.385vw]"
+        class="block md:hidden mobilBox z-[1] absolute mt-[8vw] h-[15.385vw] w-[15.385vw]"
-        id="motionSVG"
+        id="mobileMotionSVG"
         width="60"
         height="60"
         viewBox="0 0 60 60"
@@ -120,16 +120,14 @@ onMounted(() => {
     gsap.to("#motionSVG", {
       scrollTrigger: {
         trigger: "#motionSVG",
-        start: "top 30%",
+        start: "top 10%",
         end: () =>
           "+=" +
           document.querySelector("#motionPath").getBoundingClientRect().height,
         scrub: 1,
       },
-      ease: pathEase("#motionPath"), // the ease of the snap animation ("power3" by default)
+     ease: "slow(0.7,0.7,false)",
-      //   y: 700,
       y: document.querySelector("#motionPath").getBoundingClientRect().height,
-      //   immediateRender: true,
       motionPath: {
         path: "#motionPath",
         align: "#motionPath",
@@ -137,6 +135,32 @@ onMounted(() => {
         autoRotate: -90,
       },
     });
+    gsap.to(".mobileMotionPath #mobileMotionPath", {
+      strokeDashoffset: -300,
+      repeat: -1,
+      ease: "none",
+      duration: 5,
+    });
+    gsap.to("#mobileMotionSVG", {
+      scrollTrigger: {
+        trigger: "#mobileMotionSVG",
+        start: "top 20%",
+        end: () =>
+          "+=" +
+          document.querySelector("#mobileMotionPath").getBoundingClientRect().height,
+        scrub: 1,
+      },
+      ease: "slow(0.7,0.7,false)", // the ease of the snap animation ("power3" by default)
+      //   y: 700,
+      y: document.querySelector("#mobileMotionPath").getBoundingClientRect().height,
+      //   immediateRender: true,
+      motionPath: {
+        path: "#mobileMotionPath",
+        align: "#mobileMotionPath",
+        alignOrigin: [0.5, 0.5],
+        autoRotate: -90,
+      },
+    });
     function pathEase(path, config = {}) {
       let axis = config.axis || "y",
         precision = config.precision || 1,

components/home-page/Slider.vue

@@ -83,12 +83,6 @@
        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>
@@ -144,7 +138,7 @@ onMounted(() => {
       },
       rotation: 500,
       duration: 3,
-      ease: "none",
+      ease: "slow(0.7,0.7,false)",
     });
   gsap.to(".big", {
     scrollTrigger: {

layouts/default.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- desktop navMenu -->
   <svg
     @click="[openMenu(), (menuStatus = !menuStatus)]"
     class="cursor-pointer z-[1000] h-[8.718vw] md:h-[3.125vw] w-[8.718vw] md:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[6.154vw] md:mt-[1.51vw] me-[6.154vw] md:me-[1.25vw]"
@@ -34,6 +33,12 @@
     </defs>
   </svg>
 
+
+
+
+
+
+    <!-- desktop navMenu -->
   <div class="hidden md:block" v-show="menuStatus">
     <svg
       class="svg cursor-pointer z-[1000] h-[8.718vw] md:h-[3.125vw] w-[8.718vw] md:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 md:mt-[5.885vw] me-[6.154vw] md:me-[1.25vw]"
@@ -247,7 +252,7 @@
   <!-- mobile navMenu -->
   <div
   v-show="menuStatus"
-    class="fixed z-[1000] !bottom-[0px] flex h-[100vh] w-full items-center justify-center md:hidden"
+    class="flex md:hidden absolute bg-white !bottom-[0px]  h-[100vh] w-full items-center justify-center "
   >
     <div
       class="fixed bottom-[5vw] space-y-[6vw] text-[4.038vw] flex flex-col items-center justify-center h-[110.769vw] w-[90%] bg-white z-[10] rounded-[6.41vw]"
@@ -358,20 +363,31 @@
 const menuStatus = ref(false);
 
 const openMenu = () => {
+
   if (menuStatus.value === true) {
     document.getElementById("openMenuFilter").style.filter = "none";
     document.getElementById("openMenuFilter").style.backdropFilter = "none";
     document
       .getElementsByTagName("html")[0]
       .classList.remove("overflow-hidden");
-    console.log("nist");
+
   } else {
     document.getElementById("openMenuFilter").style.filter = "brightness(50%)";
     document.getElementById("openMenuFilter").style.backdropFilter = "brightness(90%)";
-
-
     document.getElementsByTagName("html")[0].classList.add("overflow-hidden");
-    console.log("hast");
+    document.getElementById("openMenuFilter").onclick = outOfButton;
+console.log('baaz');
+    
   }
 };
+
+function outOfButton(){
+  if (menuStatus.value === true) {
+      openMenu()
+      menuStatus.value = false
+console.log('clsd');
+  }
+}
+
+
 </script>