fixed card stacking animation

components/footer.html

@@ -53,7 +53,7 @@
           <li><a href="#">Careers</a></li>
           <li><a href="#">Our Locations</a></li>
           <li><a href="#">Log In</a></li>
-          <li><a href="#">Contact Us</a></li>
+          <li><a href="#/contact">Contact Us</a></li>
         </ul>
       </div>
     </div>

css/testing.css

@@ -1,56 +1,50 @@
 /* Base setup */
 :root {
-    --font-primary: 'Open Sans', sans-serif;
-    /* default body font */
-    --font-secondary: 'Larken', serif;
-    /* decorative font */
-    --font-tertiary: 'Inter', sans-serif;
-    /* for headings or special text */
+  --font-primary: "Open Sans", sans-serif;
+  /* default body font */
+  --font-secondary: "Larken", serif;
+  /* decorative font */
+  --font-tertiary: "Inter", sans-serif;
+  /* for headings or special text */
 }
 
 section.ask-advantage-scroll {
-    padding: 60px 0 0 0;
+  padding: 60px 0 0 0;
 }
 
-.ask-advantage-scroll h2
-
- {
-    font-family: var(--font-secondary);
-    font-weight: 400;
-    font-style: Regular;
-    font-size: 40px;
-    line-height: 100%;
-    letter-spacing: 0%;
-    color: #033A49;
+.ask-advantage-scroll h2 {
+  font-family: var(--font-secondary);
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 40px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  color: #033a49;
 }
 .ask-advantage-scroll p.lead {
-    font-family: var(--font-primary);
-    font-weight: 400;
-    font-size: 18px;
-    line-height: 100%;
-    letter-spacing: 0%;
-    color: #3E3F3F;
-    margin-bottom: 40px;
-    margin-top: 15px;
+  font-family: var(--font-primary);
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  color: #3e3f3f;
+  margin-bottom: 40px;
+  margin-top: 15px;
 }
 
-
 .cards-wrapper {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 60px;
-  
 }
 
-
 .card-scroll {
   background-image: url("../assests/images/desbackcard-scroll.svg");
   background-repeat: no-repeat;
-      background-size: cover;
-  
- 
+  background-size: cover;
+
   background-position: center center; /* centers it horizontally and vertically */
 
   border-radius: 30px;
@@ -59,61 +53,56 @@ section.ask-advantage-scroll {
 
   display: flex;
   flex-direction: row;
-  border: 1px solid #E6E7E8;
-  box-shadow: 0px 5px 14px 0px #0000000D;
+  border: 1px solid #e6e7e8;
+  box-shadow: 0px 5px 14px 0px #0000000d;
 
   /* reduce side padding so image aligns better */
-  padding: 50px 80px 0px 80px; 
+  padding: 50px 80px 0px 80px;
   gap: 60px;
-   transition: transform 0.3s ease;
+  transition: transform 0.3s ease;
 }
 
 .card-content {
-    width: 60%;
-    margin-bottom: 50px;
+  width: 60%;
+  margin-bottom: 50px;
 }
 .card-image {
-    width: 40%;
-    display: flex;
-    align-items: end;
+  width: 40%;
+  display: flex;
+  align-items: end;
 }
 
-
-
-
 .card-label span {
- color: #B18C4A;
-    font-family: var(--font-primary);
-    font-weight: 400;
-    font-size: 24px;
-    line-height: 21.9px;
-    letter-spacing: 0px;
-    vertical-align: middle;
-    text-transform: capitalize;
+  color: #b18c4a;
+  font-family: var(--font-primary);
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 21.9px;
+  letter-spacing: 0px;
+  vertical-align: middle;
+  text-transform: capitalize;
 }
 
 .scroll-tiile {
-     margin: 20px 0 10px 0;
-    color: #033A49;
-    font-family: var(--font-secondary);
-    font-weight: 400;
-    font-size: 32px;
-    line-height: 100%;
-    letter-spacing: 2px;
+  margin: 20px 0 10px 0;
+  color: #033a49;
+  font-family: var(--font-secondary);
+  font-weight: 400;
+  font-size: 32px;
+  line-height: 100%;
+  letter-spacing: 2px;
 }
-.scroll-desc{
-font-family: var(--font-primary);
-font-weight: 400;
-
-font-size: 18px;
-line-height: 100%;
-color: #3E3F3F;
-
+.scroll-desc {
+  font-family: var(--font-primary);
+  font-weight: 400;
 
+  font-size: 18px;
+  line-height: 100%;
+  color: #3e3f3f;
 }
 
 .scroll-ul {
- margin-left: 15px;
+  margin-left: 15px;
   padding-left: 20px;
   font-size: 14px;
   color: #555;
@@ -121,98 +110,79 @@ color: #3E3F3F;
 }
 
 .scroll-ul .scroll-li {
-      
-    font-family: var(--font-primary);
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 32px;
+  font-family: var(--font-primary);
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 32px;
 }
 
-
-
 .card-image img {
   width: 316px;
   display: block;
 }
 
 @media (max-width: 768px) {
- .card-scroll {
-  background-image: url("../assests/images/mobilebackcard-scroll.svg") ;
-  background-repeat: no-repeat;
-  background-size: cover; /* fills card area */
-  background-position: center center; /* show from top */
+  .card-scroll {
+    background-image: url("../assests/images/mobilebackcard-scroll.svg");
+    background-repeat: no-repeat;
+    background-size: cover; /* fills card area */
+    background-position: center center; /* show from top */
 
-  border-radius: 30px;
-  width: 100%;
-  overflow: hidden;
+    border-radius: 30px;
+    width: 100%;
+    overflow: hidden;
 
-  display: flex;
-  flex-direction: column;
-  border: 1px solid #E6E7E8;
-  box-shadow: 0px 0px 14px 0px #0000000D;
-  padding: 30px 20px 0px 20px;
-  gap: 30px;
-}
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #e6e7e8;
+    box-shadow: 0px 0px 14px 0px #0000000d;
+    padding: 30px 20px 0px 20px;
+    gap: 30px;
+  }
 
-.card-content {
+  .card-content {
     width: 100%;
     margin-bottom: 0px;
-}
-.card-image {
+  }
+  .card-image {
     width: 100%;
     text-align: center;
     justify-content: center;
     display: flex;
-}
-.card-image img {
+  }
+  .card-image img {
     width: 220px;
     display: block;
-}
-.card-label span {
-    
+  }
+  .card-label span {
     font-size: 18px;
-   
-}
-.scroll-tiile {
-   
+  }
+  .scroll-tiile {
     font-size: 18px;
     letter-spacing: 0.5px;
-}
-.cards-wrapper {
-
+  }
+  .cards-wrapper {
     margin-top: 30px;
-}
-.scroll-desc {
-   
+  }
+  .scroll-desc {
     font-size: 13px;
-   
-}
-.scroll-ul {
-   
+  }
+  .scroll-ul {
     display: none;
-}
-.ask-advantage-scroll h2
-
- {
-   
+  }
+  .ask-advantage-scroll h2 {
     font-size: 26px;
     line-height: 36px;
-  
-}
-.ask-advantage-scroll p.lead {
-   
-  
+  }
+  .ask-advantage-scroll p.lead {
     font-size: 14px;
     line-height: 22px;
-   
-   
+  }
 }
-}
-
 
 .cards-wrapper {
   position: relative;
-  height: 530px;   /* ya jitna aapko chahiye ho */
+  height: 530px; /* ya jitna aapko chahiye ho */
   overflow: hidden;
 }
 
@@ -232,8 +202,7 @@ color: #3E3F3F;
 }
 
 @media (max-width: 991px) {
-     section.ask-advantage-scroll.container {
+  section.ask-advantage-scroll.container {
     padding: 60px 25px 0 25px !important;
+  }
 }
-}
-

js/main.js

@@ -329,48 +329,183 @@ window.openDrawer = function (name, role, img, desc) {
 let cards = [];
 let currentIndex = 0;
 let animating = false;
-let isInsideSection = false;
+let isSectionPinned = false;
+let scrollTrigger;
+let allowNormalScroll = false;
+let scrollLockPosition = 0;
 
+// ===============================
+// ✅ GSAP Stack Scroll with Section Pinning
+// ===============================
 function initGsapStackScroll() {
-  const section = document.querySelector(".cards-wrapper");
+  const section = document.querySelector(".ask-advantage-scroll");
   if (!section) return;
 
-  cards = Array.from(section.querySelectorAll(".card-scroll"));
+  const cardsWrapper = document.querySelector(".cards-wrapper");
+  if (!cardsWrapper) return;
+
+  cards = Array.from(cardsWrapper.querySelectorAll(".card-scroll"));
   if (!cards.length) return;
 
   // Initial setup
   gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
   gsap.set(cards[0], { opacity: 1, y: "60px", zIndex: 5 });
   currentIndex = 0;
+  allowNormalScroll = false;
 
-  // Section hover control
-  section.addEventListener("mouseenter", () => (isInsideSection = true));
-  section.addEventListener("mouseleave", () => (isInsideSection = false));
+  // Calculate exact pinning distance
+  const cardHeight = cardsWrapper.offsetHeight;
+  const totalCards = cards.length;
+  const pinningDistance = cardHeight * totalCards * 0.4;
 
-  // Remove previous wheel listener if any
-  window.removeEventListener("wheel", window._gsapStackHandler);
+  // Scroll pinning logic
+  scrollTrigger = ScrollTrigger.create({
+    trigger: cardsWrapper,
+    start: "top top",
+    end: `+=${pinningDistance}`,
+    pin: true,
+    anticipatePin: 1,
+    pinSpacing: true,
+    onEnter: () => {
+      isSectionPinned = true;
+      allowNormalScroll = false;
+      if (currentIndex !== 0) {
+        resetToFirstCard();
+      }
+    },
+    onLeave: () => {
+      isSectionPinned = false;
+      allowNormalScroll = true;
+    },
+    onEnterBack: () => {
+      isSectionPinned = true;
+      allowNormalScroll = false;
+    },
+    onLeaveBack: () => {
+      isSectionPinned = false;
+      allowNormalScroll = true;
+    }
+  });
 
-  // Add new wheel scroll handler
+  // deepseek today code: Enhanced scroll prevention with visible scrollbar
   window._gsapStackHandler = function (e) {
-    if (!isInsideSection || animating) return;
-    e.preventDefault();
-
-    if (e.deltaY > 0) {
-      showNextGsapCard();
-    } else {
-      showPrevGsapCard();
+    if (isSectionPinned && !allowNormalScroll) {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      if (animating) {
+        // If already animating, just prevent scroll completely
+        return;
+      }
+      
+      if (e.deltaY > 0) {
+        showNextGsapCard();
+      } else if (e.deltaY < 0) {
+        showPrevGsapCard();
+      }
     }
   };
 
-  window.addEventListener("wheel", window._gsapStackHandler, {
-    passive: false,
+  // Add wheel event listener
+  window.addEventListener("wheel", window._gsapStackHandler, { 
+    passive: false 
+  });
+
+  // deepseek today code: Active scroll position locking during animations
+  window._scrollLockHandler = function() {
+    if (isSectionPinned && !allowNormalScroll && animating) {
+      // Immediately restore to locked position
+      window.scrollTo(0, scrollLockPosition);
+    }
+  };
+
+  window.addEventListener("scroll", window._scrollLockHandler, { passive: false });
+
+  // Prevent keyboard scrolling during animations
+  window.addEventListener("keydown", function(e) {
+    if (isSectionPinned && !allowNormalScroll && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === " " || e.key === "PageDown" || e.key === "PageUp")) {
+      e.preventDefault();
+      
+      if (animating) return;
+      
+      if (e.key === "ArrowDown" || e.key === "PageDown" || e.key === " ") {
+        showNextGsapCard();
+      } else if (e.key === "ArrowUp" || e.key === "PageUp") {
+        showPrevGsapCard();
+      }
+    }
+  });
+}
+
+// deepseek today code: Enhanced scroll locking without hiding scrollbar
+function lockScrollDuringAnimation() {
+  animating = true;
+  scrollLockPosition = window.scrollY; // Store current scroll position
+  
+  // Keep scrollbar visible but prevent any scroll movement
+  document.documentElement.style.overscrollBehavior = 'none';
+  document.body.style.overscrollBehavior = 'none';
+  
+  // Use requestAnimationFrame to continuously lock scroll position
+  function maintainScrollLock() {
+    if (animating && isSectionPinned && !allowNormalScroll) {
+      if (window.scrollY !== scrollLockPosition) {
+        window.scrollTo(0, scrollLockPosition);
+      }
+      requestAnimationFrame(maintainScrollLock);
+    }
+  }
+  
+  maintainScrollLock();
+}
+
+function unlockScrollAfterAnimation() {
+  animating = false;
+  
+  // Restore normal scroll behavior
+  document.documentElement.style.overscrollBehavior = '';
+  document.body.style.overscrollBehavior = '';
+}
+
+// Reset to first card function
+function resetToFirstCard() {
+  lockScrollDuringAnimation();
+  
+  // Hide all cards
+  gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
+  
+  // Show first card
+  gsap.set(cards[0], { 
+    opacity: 1, 
+    y: "60px", 
+    zIndex: 5,
+    onComplete: () => {
+      currentIndex = 0;
+      unlockScrollAfterAnimation();
+      allowNormalScroll = false;
+    }
   });
 }
 
 // ✅ Show next card
 function showNextGsapCard() {
-  if (currentIndex >= cards.length - 1) return;
-  animating = true;
+  if (currentIndex >= cards.length - 1) {
+    allowNormalScroll = true;
+    unlockScrollAfterAnimation();
+    
+    const lastCard = cards[currentIndex];
+    gsap.to(lastCard, {
+      y: "50px",
+      duration: 0.3,
+      ease: "power2.out",
+      yoyo: true,
+      repeat: 1
+    });
+    
+    return;
+  }
+  
+  lockScrollDuringAnimation();
 
   const current = cards[currentIndex];
   const next = cards[currentIndex + 1];
@@ -398,7 +533,11 @@ function showNextGsapCard() {
       onComplete: () => {
         currentIndex++;
         adjustVisibleCards();
-        animating = false;
+        unlockScrollAfterAnimation();
+        
+        if (currentIndex >= cards.length - 1) {
+          allowNormalScroll = true;
+        }
       },
     }
   );
@@ -406,8 +545,13 @@ function showNextGsapCard() {
 
 // ✅ Show previous card
 function showPrevGsapCard() {
-  if (currentIndex <= 0) return;
-  animating = true;
+  if (currentIndex <= 0) {
+    allowNormalScroll = true;
+    unlockScrollAfterAnimation();
+    return;
+  }
+  
+  lockScrollDuringAnimation();
 
   const current = cards[currentIndex];
   const prev = cards[currentIndex - 1];
@@ -431,7 +575,11 @@ function showPrevGsapCard() {
     onComplete: () => {
       currentIndex--;
       adjustVisibleCards();
-      animating = false;
+      unlockScrollAfterAnimation();
+      
+      if (currentIndex > 0) {
+        allowNormalScroll = false;
+      }
     },
   });
 }
@@ -455,8 +603,8 @@ function adjustVisibleCards() {
   for (let i = 1; i <= 2; i++) {
     const prevIndex = currentIndex - i;
     if (prevIndex >= 0) {
-      const yOffset = 60 - i * 25; // e.g., 60px, 35px
-      const scale = 1 - i * 0.05;  // e.g., 1, 0.95, 0.9
+      const yOffset = 60 - i * 25;
+      const scale = 1 - i * 0.05;
       const zIndex = 5 - i;
 
       gsap.set(cards[prevIndex], {