fixed animation bugs

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]"
-        id="motionSVG"
+        class="block md:hidden mobilBox z-[1] absolute mt-[8vw] h-[15.385vw] w-[15.385vw]"
+        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)
-      //   y: 700,
+     ease: "slow(0.7,0.7,false)",
       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,