animations of pages 7 and 8

components/home-page/AboutUs.vue

@@ -222,37 +222,12 @@ let ctx;
 const pnl = ref()
 onMounted(() => {
   const panels = gsap.utils.toArray(".panel");
+  gsap.set(panels, { xPercent: 0, yPercent: 100, autoAlpha: 1 });
  console.clear();
+
   ctx = gsap.context((self) => {
 
 
-//     const boxes = gsap.utils.toArray('.panel');
-//     const timeline = gsap.timeline({
-//     scrollTrigger: {
-//       trigger: project,
-//       start: "center bottom",
-//       ease: "power2",
-//       toggleActions: "play none none reverse"
-//     }
-//   })
-// boxes.forEach((box, i) => {
-//   const anim = gsap.fromTo(box, 
-//   {opacity: 0, y: 200},
-//   {opacity: 1, y: 0}, "-=0.5");
-//   ScrollTrigger.create({
-//     trigger: box,
-//     animation: anim,
-//     toggleActions: "play none none reverse",
-//     repeat: -1
-//    // once: true,
-//   });
-// });
-
-
-
-
-
-
     gsap.to("#crclrMotion", {
       scrollTrigger: {
         trigger: ".panel",
@@ -271,7 +246,7 @@ onMounted(() => {
         trigger: ".panel",
         start: "top 80%",
         end: () =>
-        "+=4000", 
+        "+=3000", 
         //     "+=" + 150 * panels.length + "%",
           // "+=" + document.querySelector(".about").getBoundingClientRect().width,
         scrub: 1,
@@ -304,14 +279,16 @@ onMounted(() => {
       // y: 50000,
       pin: true,
       scrub: 1,
+      
     },
-    y: 110000,
+    y: 11000,
   });
   panels.forEach((panel, index) => {
     if (index) {
       tl.to(
         panel,
         {
+          y: -window.innerHeight * 0.001,
           yPercent: 0,
           ease: "none",
         },