Building an image that meets the needs of your clients.

.stacking_card-container {
  position: sticky;
  top: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Karta */
.stacking_card {
  display: flex;
  flex-direction: column;
  position: relative;
  transform-origin: top;
  transition: transform 0.1s ease-out;}

// Helper function to map a value from one range to another
function map(value, in_min, in_max, out_min, out_max) {
  return (
    out_min +
    ((value - in_min) * (out_max - out_min)) / (in_max - in_min)
  );
}

// Get all card containers
const cardContainers = document.querySelectorAll('.stacking_card-container');

// Total number of cards
const numCards = cardContainers.length;

// Convert NodeList to Array and store card elements
const cardElements = Array.from(cardContainers).map(
  (cardContainer, index) => {
    const card = cardContainer.querySelector('.stacking_card');
    const inner = card.querySelector('.inner');

    // Set initial top position for stacking effect
    card.style.top = `calc(${index * 25}px)`; // Regular stacking
    card.style.zIndex = numCards - index; // Ensure proper stacking order

    return {
      cardContainer,
      card,
      inner,
      index,
    };
  }
);

// Initialize Lenis for smooth scrolling
const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  smoothWheel: true,
  smoothTouch: false,
});

// Scroll handler
function onScroll() {
  const scrollY = lenis.scroll; // Use Lenis scroll position
  const windowHeight = window.innerHeight;

  // Define base and final minScale values
  const baseMinScale = 0.8; // Adjust as needed
  const finalMinScale = 0.95; // Adjust as needed

  // Calculate scale increment per card
  const scaleIncrement = (finalMinScale - baseMinScale) / (numCards - 1);

  cardElements.forEach((cardElement, index) => {
    const { card, inner } = cardElement;

    // Define start and end points for scaling for each card
    const start = windowHeight * index + windowHeight * 1.1; // Start animation later
    const end = windowHeight * (index + 1);

    // Calculate progress for this card
    const cardProgress = (scrollY - start) / windowHeight;
    const clampedProgress = Math.max(0, Math.min(1, cardProgress));

    // Calculate minScale for this card based on its index
    const minScale = baseMinScale + index * scaleIncrement;

    // Handle animation for all cards
    if (index === numCards - 1) {
      // Last card
      const lastCardStart = windowHeight * (numCards - 1);
      const progress = Math.max(0, Math.min(1, (scrollY - lastCardStart) / windowHeight));

      card.style.zIndex = numCards + 1; // Bring to front
      card.style.transform = `translateY(${progress * -50}px) scale(1)`; // Pull up
    } else {
      // All other cards
      if (clampedProgress >= 0 && clampedProgress <= 1) {
        const scale = 1 - clampedProgress * (1 - minScale);
        card.style.transform = `scale(${scale})`;
        card.style.zIndex = numCards - index; // Maintain stacking
      } else if (scrollY < start) {
        card.style.transform = `scale(1)`;
        card.style.zIndex = numCards - index; // Reset stacking
      } else {
        card.style.transform = `scale(${minScale})`;
      }
    }
  });
}

// Animation loop
function raf(time) {
  lenis.raf(time);
  onScroll(); // Call your scroll handler
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);