scroll animation and card width

css/style.css

@@ -1954,7 +1954,7 @@ span.textaccor {
     border-radius: 12px;
     margin-top: 0px;
     margin-right: 10px;
-    width: 47%;
+    width: 45%;
   }
 
   .padding-icon1 {
@@ -1963,7 +1963,7 @@ span.textaccor {
     border-radius: 12px;
     margin-top: 0px;
     margin-left: 10px;
-    width: 47%;
+    width: 45%;
   }
 
   .padding-icon2 {
@@ -1972,7 +1972,7 @@ span.textaccor {
     border-radius: 12px;
     margin-top: 20px;
     margin-right: 10px;
-    width: 47%;
+    width: 45%;
   }
 
   .padding-icon3 {
@@ -1981,7 +1981,7 @@ span.textaccor {
     border-radius: 12px;
     margin-top: 20px;
     margin-left: 10px;
-    width: 47%;
+    width: 45%;
   }
 
   .padding-icon4 {
@@ -1999,7 +1999,7 @@ span.textaccor {
     border-radius: 12px;
     margin-top: 20px;
     margin-left: 10px;
-    width: 47%;
+    width: 45%;
   }
 
   .padding-icon6 {
@@ -2008,7 +2008,7 @@ span.textaccor {
     border-radius: 12px;
     margin-top: 20px;
     margin-right: 10px;
-    width: 47%;
+    width: 45%;
   }
 
   .padding-icon7 {
@@ -2017,7 +2017,7 @@ span.textaccor {
     border-radius: 12px;
     margin-top: 20px;
     margin-left: 10px;
-    width: 47%;
+    width: 45%;
   }
 
   .mt-row {

js/main.js

@@ -332,7 +332,6 @@ let animating = false;
 let isSectionPinned = false;
 let scrollTrigger;
 let allowNormalScroll = false;
-let scrollLockPosition = 0;
 
 // ===============================
 // ✅ GSAP Stack Scroll with Section Pinning
@@ -347,22 +346,22 @@ function initGsapStackScroll() {
   cards = Array.from(cardsWrapper.querySelectorAll(".card-scroll"));
   if (!cards.length) return;
 
-  // Initial setup
+  // Initial setup - Using your simple stacking logic
   gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
   gsap.set(cards[0], { opacity: 1, y: "60px", zIndex: 5 });
   currentIndex = 0;
   allowNormalScroll = false;
 
-  // Calculate exact pinning distance
+  //Calculate exact pinning distance
   const cardHeight = cardsWrapper.offsetHeight;
   const totalCards = cards.length;
-  const pinningDistance = cardHeight * totalCards * 0.4;
+  const pinningDistance = cardHeight * totalCards * 1.5; // Adjust multiplier as needed
 
-  // Scroll pinning logic
+  // Scroll pinning logic from updated code
   scrollTrigger = ScrollTrigger.create({
     trigger: cardsWrapper,
     start: "top top",
-    end: `+=${pinningDistance}`,
+    end:`+=${pinningDistance}`,
     pin: true,
     anticipatePin: 1,
     pinSpacing: true,
@@ -376,6 +375,7 @@ function initGsapStackScroll() {
     onLeave: () => {
       isSectionPinned = false;
       allowNormalScroll = true;
+      console.log("Left pinned section");
     },
     onEnterBack: () => {
       isSectionPinned = true;
@@ -387,89 +387,34 @@ function initGsapStackScroll() {
     }
   });
 
-  // deepseek today code: Enhanced scroll prevention with visible scrollbar
+  // Global wheel handler that checks if section is pinned
   window._gsapStackHandler = function (e) {
-    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();
-      }
+    if (!isSectionPinned || animating) return;
+    
+    // Allow normal scrolling when at boundaries
+    if (allowNormalScroll || 
+        (e.deltaY > 0 && currentIndex >= cards.length - 1) || 
+        (e.deltaY < 0 && currentIndex <= 0)) {
+      return;
+    }
+    
+    e.preventDefault();
+
+    if (e.deltaY > 0) {
+      showNextGsapCard();
+    } else {
+      showPrevGsapCard();
     }
   };
 
-  // Add wheel event listener
-  window.addEventListener("wheel", window._gsapStackHandler, { 
-    passive: false 
+  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();
+  animating = true;
   
   // Hide all cards
   gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
@@ -481,18 +426,19 @@ function resetToFirstCard() {
     zIndex: 5,
     onComplete: () => {
       currentIndex = 0;
-      unlockScrollAfterAnimation();
+      animating = false;
       allowNormalScroll = false;
     }
   });
 }
 
-// ✅ Show next card
+// ✅ Show next card - Using your simple stacking logic
 function showNextGsapCard() {
   if (currentIndex >= cards.length - 1) {
+    // Enable normal scrolling when reaching last card
     allowNormalScroll = true;
-    unlockScrollAfterAnimation();
     
+    // Add a small visual indicator that normal scrolling is available
     const lastCard = cards[currentIndex];
     gsap.to(lastCard, {
       y: "50px",
@@ -505,7 +451,7 @@ function showNextGsapCard() {
     return;
   }
   
-  lockScrollDuringAnimation();
+  animating = true;
 
   const current = cards[currentIndex];
   const next = cards[currentIndex + 1];
@@ -533,8 +479,9 @@ function showNextGsapCard() {
       onComplete: () => {
         currentIndex++;
         adjustVisibleCards();
-        unlockScrollAfterAnimation();
+        animating = false;
         
+        // Enable normal scrolling when reaching last card
         if (currentIndex >= cards.length - 1) {
           allowNormalScroll = true;
         }
@@ -543,15 +490,15 @@ function showNextGsapCard() {
   );
 }
 
-// ✅ Show previous card
+// ✅ Show previous card - Using your simple stacking logic
 function showPrevGsapCard() {
   if (currentIndex <= 0) {
+    // Enable normal scrolling when at first card
     allowNormalScroll = true;
-    unlockScrollAfterAnimation();
     return;
   }
   
-  lockScrollDuringAnimation();
+  animating = true;
 
   const current = cards[currentIndex];
   const prev = cards[currentIndex - 1];
@@ -575,8 +522,9 @@ function showPrevGsapCard() {
     onComplete: () => {
       currentIndex--;
       adjustVisibleCards();
-      unlockScrollAfterAnimation();
+      animating = false;
       
+      // Disable normal scrolling if not at first card
       if (currentIndex > 0) {
         allowNormalScroll = false;
       }
@@ -584,7 +532,7 @@ function showPrevGsapCard() {
   });
 }
 
-// ✅ Maintain only 3 visible cards in stack
+// ✅ Maintain only 3 visible cards in stack - Using your simple stacking logic
 function adjustVisibleCards() {
   // Reset all first
   gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 });
@@ -603,8 +551,8 @@ function adjustVisibleCards() {
   for (let i = 1; i <= 2; i++) {
     const prevIndex = currentIndex - i;
     if (prevIndex >= 0) {
-      const yOffset = 60 - i * 25;
-      const scale = 1 - i * 0.05;
+      const yOffset = 60 - i * 25; // e.g., 60px, 35px
+      const scale = 1 - i * 0.05;  // e.g., 1, 0.95, 0.9
       const zIndex = 5 - i;
 
       gsap.set(cards[prevIndex], {