enable stacking animation in mobile device

js/main.js

@@ -334,7 +334,7 @@ let scrollTrigger;
 let allowNormalScroll = false;
 
 // ===============================
-// ✅ GSAP Stack Scroll with Section Pinning (Fixed Scroll Lock Only)
+// ✅ GSAP Stack Scroll with Section Pinning (Desktop + Mobile Support)
 // ===============================
 function initGsapStackScroll() {
   const section = document.querySelector(".ask-advantage-scroll");
@@ -386,18 +386,17 @@ function initGsapStackScroll() {
     },
   });
 
-  // ✅ Wheel handler with scroll block fix
+  // ✅ Wheel handler (desktop)
   window._gsapStackHandler = function (e) {
     if (!isSectionPinned) return;
 
-    // Completely block scroll while animating
     if (animating) {
       e.preventDefault();
       e.stopPropagation();
       return;
     }
 
-    // Boundaries check
+    // Boundaries
     if (
       (e.deltaY > 0 && currentIndex >= cards.length - 1) ||
       (e.deltaY < 0 && currentIndex <= 0)
@@ -406,7 +405,6 @@ function initGsapStackScroll() {
       return;
     }
 
-    // Start animation & block scroll during it
     e.preventDefault();
     e.stopPropagation();
 
@@ -425,7 +423,7 @@ function initGsapStackScroll() {
       (e.key === "ArrowDown" && currentIndex >= cards.length - 1) ||
       (e.key === "ArrowUp" && currentIndex <= 0)
     ) {
-      return; // Allow normal scroll at boundaries
+      return;
     }
 
     if (e.key === "ArrowDown") {
@@ -437,10 +435,40 @@ function initGsapStackScroll() {
     }
   };
 
-  window.addEventListener("wheel", window._gsapStackHandler, {
-    passive: false,
-  });
+  // ✅ Touch handler (mobile)
+  let touchStartY = 0;
+  let touchEndY = 0;
+
+  window._gsapTouchStart = function (e) {
+    touchStartY = e.touches[0].clientY;
+  };
+
+  window._gsapTouchMove = function (e) {
+    touchEndY = e.touches[0].clientY;
+  };
+
+  window._gsapTouchEnd = function () {
+    if (!isSectionPinned || animating) return;
+    const deltaY = touchStartY - touchEndY;
+
+    // Swipe threshold
+    if (Math.abs(deltaY) < 40) return;
+
+    if (deltaY > 0) {
+      // Swipe up → next card
+      showNextGsapCard();
+    } else {
+      // Swipe down → previous card
+      showPrevGsapCard();
+    }
+  };
+
+  // Attach listeners
+  window.addEventListener("wheel", window._gsapStackHandler, { passive: false });
   window.addEventListener("keydown", window._gsapKeyHandler);
+  window.addEventListener("touchstart", window._gsapTouchStart, { passive: true });
+  window.addEventListener("touchmove", window._gsapTouchMove, { passive: true });
+  window.addEventListener("touchend", window._gsapTouchEnd);
 }
 
 // ✅ Reset to first card
@@ -494,7 +522,6 @@ function showNextGsapCard() {
         adjustVisibleCards();
         animating = false;
 
-        // ✅ Allow normal scroll only after last card animation completes
         if (currentIndex >= cards.length - 1) {
           allowNormalScroll = true;
           ScrollTrigger.refresh(true);
@@ -545,7 +572,6 @@ function showPrevGsapCard() {
 function adjustVisibleCards() {
   gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
 
-  // Active card
   if (cards[currentIndex]) {
     gsap.set(cards[currentIndex], {
       y: "60px",
@@ -555,7 +581,6 @@ function adjustVisibleCards() {
     });
   }
 
-  // Show only 2 previous cards
   for (let i = 1; i <= 2; i++) {
     const prevIndex = currentIndex - i;
     if (prevIndex >= 0) {
@@ -572,7 +597,6 @@ function adjustVisibleCards() {
     }
   }
 
-  // Hide older cards
   const hideIndex = currentIndex - 3;
   if (hideIndex >= 0 && cards[hideIndex]) {
     gsap.to(cards[hideIndex], {
@@ -586,15 +610,17 @@ function adjustVisibleCards() {
 
 // ✅ Cleanup function
 function cleanupGsapStackScroll() {
-  if (window._gsapStackHandler) {
+  if (window._gsapStackHandler)
     window.removeEventListener("wheel", window._gsapStackHandler);
-  }
-  if (window._gsapKeyHandler) {
+  if (window._gsapKeyHandler)
     window.removeEventListener("keydown", window._gsapKeyHandler);
-  }
-  if (scrollTrigger) {
-    scrollTrigger.kill();
-  }
+  if (window._gsapTouchStart)
+    window.removeEventListener("touchstart", window._gsapTouchStart);
+  if (window._gsapTouchMove)
+    window.removeEventListener("touchmove", window._gsapTouchMove);
+  if (window._gsapTouchEnd)
+    window.removeEventListener("touchend", window._gsapTouchEnd);
+  if (scrollTrigger) scrollTrigger.kill();
 }
 
 // Initialize after DOM load
@@ -602,6 +628,7 @@ document.addEventListener("DOMContentLoaded", initGsapStackScroll);
 window.addEventListener("beforeunload", cleanupGsapStackScroll);
 
 
+
 // ===============================
 // ✅ Load Page Content Dynamically
 // ===============================