animations of pages 7 and 8

components/honor-page/ShinanHonors.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex justify-center py-[20vw] md:py-[10vw]">
+ <div class="wrapper flex justify-center py-[20vw] md:py-[10vw]">
     <div
-      class="w-[85%] md:w-[81.04%] flex flex-col md:flex-row justify-between"
+      class=" md:w-[81.04%] flex flex-col md:flex-row justify-between"
     >
       <div class="text-[#383E43] w-full md:w-[58.35%]">
         <h1 class="text-[#A62186] text-[7.277vw] md:text-[2.604vw] font-bold">
@@ -17,8 +17,9 @@
           طبیعی و ارگانیک ، رژیمی و بدون گلوتن را فراهم آوریم تا بتوانیم تجربه
           خریدی سالم و اطمینان بخشی را برای شما محیا کنیم.
         </p>
+
         <div
-          class="flex flex-col flex-col-reverse md:flex-row mt-[2.8vw] w-full md:w-[27.396vw]"
+          class="text-card flex flex-col flex-col-reverse md:flex-row mt-[2.8vw] w-full md:w-[27.396vw]"
         >
           <svg
             class="rotate-90 md:rotate-0 w-[8vw] h-[8vw] md:w-[1.2vw] md:h-[3.188vw] mt-[0.7vw]"
@@ -30,29 +31,117 @@
             <circle cx="5" cy="21" r="4.5" stroke="#383E43" />
             <circle cx="5" cy="37" r="4.5" stroke="#383E43" />
           </svg>
-          <div class="bg-white p-[8vw] md:p-[1.5vw] ms-[1vw] rounded-[1.302vw]">
-            <p class="text-[4.544vw] md:text-[1.335vw]">آدرس</p>
-            <p
-              class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] leading-[5vw] md:leading-[1.563vw]"
+
+          <div>
+            <div
+              class="bg-red-200 p-[8vw] md:p-[1.5vw] ms-[1vw] rounded-[1.302vw]"
             >
-              لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
-              استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در
-              ستون و سطرآنچنان که لازم است
-            </p>
+              <p class="text-[4.544vw] md:text-[1.335vw]">آدرس</p>
+              <p
+                class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] leading-[5vw] md:leading-[1.563vw]"
+              >
+                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+                استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله
+                در ستون و سطرآنچنان که لازم است
+              </p>
+            </div>
           </div>
         </div>
       </div>
-      <div class="h-[97.949vw] md:!h-[35.417vw] w-full md:w-[35.417vw]">
-        <img
+
+      <div 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"
           alt=""
-        />
+        /> 
+      
       </div>
+      
     </div>
-  </div>
+  </div> 
+  
 </template>
 
-<script setup>
 
-</script>
+
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import Scrollbar from "smooth-scrollbar";
+import { MotionPathPlugin } from "gsap/MotionPathPlugin";
+gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
+
+const main = ref();
+let ctx;
+const pnl = ref();
+onMounted(() => {
+  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(texts, { xPercent: 0, yPercent: 100, autoAlpha: 1 });
+    // gsap.set(cards, { zIndex: (i, target, targets) => targets.length - i });
+
+    const tl = gsap.timeline({
+      defaults: {
+        duration: 1,
+        ease: "power1.inOut",
+      },
+      scrollTrigger: {
+        trigger: ".wrapper",
+        start: "top top",
+        end: "+=150%",
+        pin: ".wrapper",
+        scrub: true,
+        markers: true,
+      },
+    });
+    texts.forEach((text, i) => {
+      console.log('text', text);
+      tl.to(
+        text,
+        {
+          y: -window.innerHeight * 0.001,
+          yPercent: 0,
+        },
+        "<"
+      ).to(text, {
+        autoAlpha: 0,
+        duration: 5,
+      });
+    });
+
+
+    const tl2 = gsap.timeline({
+      defaults: {
+        duration: 1,
+        ease: "power1.inOut",
+      },
+      scrollTrigger: {
+        trigger: ".wrapper",
+        start: "top top",
+        end: "+=150%",
+        scrub: true,
+      },
+    });
+
+    cards.forEach((card, i) => {
+      tl2.to(
+        card,
+        {
+          y: -window.innerHeight * 0.001,
+          yPercent: 0,
+        },
+        "<"
+      ).to(card, {
+        autoAlpha: 0,
+        duration: 5,
+      });
+    });
+
+  });
+});
+</script>
+