fix card stacking layout

2025-11-05 12:17:58 +05:30
parent dcb32d0e42
commit 2a7c51da33
2 changed files with 88 additions and 100 deletions
--- a/css/testing.css
+++ b/css/testing.css
@@ -1,11 +1,8 @@
 /* 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 */
 }

 .ask-advantage-scroll h2 {
@@ -17,6 +14,7 @@
  letter-spacing: 0%;
  color: #033a49;
 }
+
 .ask-advantage-scroll p.lead {
  font-family: var(--font-primary);
  font-weight: 400;
@@ -28,40 +26,38 @@
  margin-top: 15px;
 }

+/* Mobile & Tablet View (default - stacked layout) */
 .cards-wrapper {
  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-  justify-content: center;
-  /* margin-top: 60px; */
+  flex-direction: column;
+  gap: 30px;
+  width: 100%;
 }

 .card-scroll {
  background-image: url("../assests/images/desbackcard-scroll.svg");
  background-repeat: no-repeat;
  background-size: cover;
-
-  background-position: center center; /* centers it horizontally and vertically */
-
+  background-position: center center;
  border-radius: 30px;
-  width: 100%;
  overflow: hidden;
-
  display: flex;
  flex-direction: row;
  border: 1px solid #e6e7e8;
  box-shadow: 0px 5px 14px 0px #0000000d;
-
-  /* reduce side padding so image aligns better */
  padding: 50px 80px 0px 80px;
  gap: 60px;
-  transition: transform 0.3s ease;
+  width: 100%;
+  position: relative;
+  opacity: 1;
+  transform: none;
 }

 .card-content {
  width: 60%;
  margin-bottom: 50px;
 }
+
 .card-image {
  width: 40%;
  display: flex;
@@ -88,10 +84,10 @@
  line-height: 100%;
  letter-spacing: 2px;
 }
+
 .scroll-desc {
  font-family: var(--font-primary);
  font-weight: 400;
-
  font-size: 18px;
  line-height: 100%;
  color: #3e3f3f;
@@ -117,21 +113,38 @@
  display: block;
 }

-@media (max-width: 768px) {
+/* Desktop View (Animation Layout) */
+@media (min-width: 1024px) {
+  .cards-wrapper {
+    position: relative;
+    height: 530px;
+    overflow: hidden;
+    display: block;
+    gap: 0;
+  }
+
+  .card-scroll {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    opacity: 0;
+    transform: translateY(100%);
+    transition: none;
+  }
+
+  .card-scroll.active {
+    opacity: 1;
+    transform: translateY(0);
+    z-index: 2;
+  }
+}
+
+/* Mobile & Tablet Styles */
+@media (max-width: 1023px) {
  .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;
-
-    display: flex;
    flex-direction: column;
-    border: 1px solid #e6e7e8;
-    box-shadow: 0px 0px 14px 0px #0000000d;
    padding: 30px 20px 0px 20px;
    gap: 30px;
  }
@@ -140,65 +153,60 @@
    width: 100%;
    margin-bottom: 0px;
  }
+
  .card-image {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
  }
+
  .card-image img {
    width: 220px;
    display: block;
  }
+
  .card-label span {
    font-size: 18px;
  }
+
  .scroll-tiile {
    font-size: 18px;
    letter-spacing: 0.5px;
  }
-  .cards-wrapper {
-    margin-top: 30px;
-  }
+
  .scroll-desc {
    font-size: 13px;
  }
+
  .scroll-ul {
    display: none;
  }
+
  .ask-advantage-scroll h2 {
    font-size: 26px;
    line-height: 36px;
  }
+
  .ask-advantage-scroll p.lead {
    font-size: 15px;
    line-height: 22px;
  }
 }

-.cards-wrapper {
-  position: relative;
-  height: 530px;
-  overflow: hidden;
-}
-
-.card-scroll {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  opacity: 0;
-  transform: translateY(100%);
-}
-
-.card-scroll.active {
-  opacity: 1;
-  transform: translateY(0);
-  z-index: 2;
+@media (max-width: 768px) {
+  .cards-wrapper {
+    gap: 20px;
+  }
+  
+  .card-scroll {
+    padding: 25px 15px 0px 15px;
+    gap: 20px;
+  }
 }

@media (max-width: 991px) {
  section.ask-advantage-scroll.container {
    padding: 60px 25px 0 25px !important;
  }
-}
+}
--- a/js/main.js
+++ b/js/main.js
@@ -334,9 +334,17 @@ let scrollTrigger;
 let allowNormalScroll = false;

 // ===============================
-// ✅ GSAP Stack Scroll with Section Pinning (Desktop + Mobile Support)
+// ✅ GSAP Stack Scroll with Section Pinning (Fixed Scroll Lock Only)
 // ===============================
 function initGsapStackScroll() {
+  // Check if device is desktop/laptop (min-width: 1024px)
+  const isDesktop = window.matchMedia("(min-width: 1024px)").matches;
+  
+  if (!isDesktop) {
+    console.log("GSAP stack scroll disabled for mobile/tablet devices");
+    return;
+  }
+
  const section = document.querySelector(".ask-advantage-scroll");
  if (!section) return;

@@ -355,7 +363,7 @@ function initGsapStackScroll() {
  // Calculate exact pinning distance
  const cardHeight = cardsWrapper.offsetHeight;
  const totalCards = cards.length;
-  const pinningDistance = cardHeight * totalCards * 2;
+  const pinningDistance = cardHeight * totalCards * 0.4;

  // Scroll pinning logic
  scrollTrigger = ScrollTrigger.create({
@@ -386,17 +394,18 @@ function initGsapStackScroll() {
    },
  });

-  // ✅ Wheel handler (desktop)
+  // ✅ Wheel handler with scroll block fix
  window._gsapStackHandler = function (e) {
    if (!isSectionPinned) return;

+    // Completely block scroll while animating
    if (animating) {
      e.preventDefault();
      e.stopPropagation();
      return;
    }

-    // Boundaries
+    // Boundaries check
    if (
      (e.deltaY > 0 && currentIndex >= cards.length - 1) ||
      (e.deltaY < 0 && currentIndex <= 0)
@@ -405,6 +414,7 @@ function initGsapStackScroll() {
      return;
    }

+    // Start animation & block scroll during it
    e.preventDefault();
    e.stopPropagation();

@@ -423,7 +433,7 @@ function initGsapStackScroll() {
      (e.key === "ArrowDown" && currentIndex >= cards.length - 1) ||
      (e.key === "ArrowUp" && currentIndex <= 0)
    ) {
-      return;
+      return; // Allow normal scroll at boundaries
    }

    if (e.key === "ArrowDown") {
@@ -435,40 +445,10 @@ function initGsapStackScroll() {
    }
  };

-  // ✅ 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("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
@@ -522,6 +502,7 @@ function showNextGsapCard() {
        adjustVisibleCards();
        animating = false;

+        // ✅ Allow normal scroll only after last card animation completes
        if (currentIndex >= cards.length - 1) {
          allowNormalScroll = true;
          ScrollTrigger.refresh(true);
@@ -572,6 +553,7 @@ function showPrevGsapCard() {
 function adjustVisibleCards() {
  gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });

+  // Active card
  if (cards[currentIndex]) {
    gsap.set(cards[currentIndex], {
      y: "60px",
@@ -581,6 +563,7 @@ function adjustVisibleCards() {
    });
  }

+  // Show only 2 previous cards
  for (let i = 1; i <= 2; i++) {
    const prevIndex = currentIndex - i;
    if (prevIndex >= 0) {
@@ -597,6 +580,7 @@ function adjustVisibleCards() {
    }
  }

+  // Hide older cards
  const hideIndex = currentIndex - 3;
  if (hideIndex >= 0 && cards[hideIndex]) {
    gsap.to(cards[hideIndex], {
@@ -610,25 +594,21 @@ 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 (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();
+  }
+  if (scrollTrigger) {
+    scrollTrigger.kill();
+  }
 }

 // Initialize after DOM load
 document.addEventListener("DOMContentLoaded", initGsapStackScroll);
 window.addEventListener("beforeunload", cleanupGsapStackScroll);

-
-
 // ===============================
 // ✅ Load Page Content Dynamically
 // ===============================