completed animations on desktop size

components/home-page/AboutUs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="about flex justify-center pt-[6.3vw]">
+  <div id="dynamic" class="about flex justify-center pt-[6.3vw]">
     <div class="relative w-[81.04%]">
       <div class="absolute -right-[0.8vw] -mt-[2.2vw]">
         <h1 class="text-[6.469vw] lg:text-[2.5vw] text-[#383E43] font-bold">
@@ -94,7 +94,9 @@
         />
       </svg>
 
-      <div class="panels relative">
+
+      
+      <div class="mt-[16vw] md:mt-0 panels relative">
         <div
           class="panel first leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
         >
@@ -118,7 +120,7 @@
         </div>
 
         <div
-          class="panel leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-yellow-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:!top-[10]"
+          class="hidden md:block panel leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-yellow-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:!top-[10]"
         >
           <h1
             class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8"
@@ -139,7 +141,7 @@
           </p>
         </div>
         <div
-          class="panel pnl leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-red-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
+          class="hidden md:block panel pnl leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-red-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
         >
           <h1
             class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8"
@@ -160,9 +162,8 @@
           </p>
         </div>
       </div>
-
       <svg
-        class="absolute mt-[95vw] right-0 block lg:hidden"
+        class="absolute mt-[75vw] right-0 block lg:hidden"
         width="66"
         height="30"
         viewBox="0 0 66 30"
@@ -221,13 +222,14 @@ const main = ref();
 let ctx;
 const pnl = ref()
 onMounted(() => {
+  if (window.innerWidth < 768) {
+    document.getElementById("dynamic").classList.remove("about")
+  }
   const panels = gsap.utils.toArray(".panel");
-  gsap.set(panels, { xPercent: 0, yPercent: 100, autoAlpha: 1 });
- console.clear();
+  gsap.set(panels, { xPercent: 0, yPercent: 100, autoAlpha: 2 });
+
 
   ctx = gsap.context((self) => {
-
-
     gsap.to("#crclrMotion", {
       scrollTrigger: {
         trigger: ".panel",
@@ -247,11 +249,8 @@ onMounted(() => {
         start: "top 80%",
         end: () =>
         "+=3000", 
-        //     "+=" + 150 * panels.length + "%",
-          // "+=" + document.querySelector(".about").getBoundingClientRect().width,
         scrub: 1,
       },
-      // ease: pathEase("#motionPath"), // the ease of the snap animation ("power3" by default)
       motionPath: {
         path: "#aboutPath",
         align: "#aboutPath",
@@ -272,29 +271,34 @@ onMounted(() => {
     yPercent: (i) => (i ? 140 : 0),
   });
   const tl = gsap.timeline({
+        defaults: {
+        duration: 1,
+        ease: "power1.inOut",
+      },
     scrollTrigger: {
       trigger: ".about",
       start: "bottom center",
       end: () => "+=" + 40 * panels.length + "%",
-      // y: 50000,
       pin: true,
       scrub: 1,
       
     },
-    y: 11000,
+
   });
   panels.forEach((panel, index) => {
-    if (index) {
+
       tl.to(
         panel,
         {
-          y: -window.innerHeight * 0.001,
-          yPercent: 0,
-          ease: "none",
+          y:-window.innerHeight * 0.001,
+          yPercent: 0,  
         },
-        "+=0.25"
-      );
-    }
+        "<",
+      ).to(panel,{
+        autoAlpha: 0,
+      })
+    
+    
   });
 });
 </script>