completed animations on desktop size

components/honor-page/ShinanHonors.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="wrapper flex justify-center py-[20vw] md:py-[10vw]">
+ <div id="parent" class="px-5 md:px-0 wrapper flex justify-center py-[20vw] md:py-[10vw]">
     <div
       class=" md:w-[81.04%] flex flex-col md:flex-row justify-between"
     >
@@ -18,7 +18,7 @@
           خریدی سالم و اطمینان بخشی را برای شما محیا کنیم.
         </p>
 
-        <div
+        <div id="textCard"
           class="text-card flex flex-col flex-col-reverse md:flex-row mt-[2.8vw] w-full md:w-[27.396vw]"
         >
           <svg
@@ -49,7 +49,7 @@
         </div>
       </div>
 
-      <div class="card h-[97.949vw] md:!h-[35.417vw] w-full md:w-[35.417vw]">
+      <div id="cards" class="card h-[97.949vw] md:!h-[35.417vw] w-full md:w-[35.417vw]">
          <img
           class="h-full w-full object-cover rounded-[1.302vw]"
           src="/public/images/honor.jpg"
@@ -77,10 +77,15 @@ const main = ref();
 let ctx;
 const pnl = ref();
 onMounted(() => {
+  if (window.innerWidth < 768) {
+    document.getElementById("parent").classList.remove("wrapper")
+    document.getElementById("cards").classList.remove("card")
+    document.getElementById("textCard").classList.remove("text-card")
+  }
   ctx = gsap.context((self) => {
     const cards = gsap.utils.toArray(".card");
     const texts = gsap.utils.toArray(".text-card");
-    gsap.set(cards, { xPercent: 0, yPercent: 100, autoAlpha: 1 });
+    gsap.set(cards, { height: 100});
     gsap.set(texts, { xPercent: 0, yPercent: 100, autoAlpha: 1 });
     // gsap.set(cards, { zIndex: (i, target, targets) => targets.length - i });
 
@@ -95,11 +100,10 @@ onMounted(() => {
         end: "+=150%",
         pin: ".wrapper",
         scrub: true,
-        markers: true,
+
       },
     });
     texts.forEach((text, i) => {
-      console.log('text', text);
       tl.to(
         text,
         {
@@ -128,14 +132,8 @@ onMounted(() => {
     });
 
     cards.forEach((card, i) => {
-      tl2.to(
-        card,
-        {
-          y: -window.innerHeight * 0.001,
-          yPercent: 0,
-        },
-        "<"
-      ).to(card, {
+      tl2.to(card, {
+        height: 0,
         autoAlpha: 0,
         duration: 5,
       });