<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

<script>
// Wait for DOM to be fully loaded
document.addEventListener("DOMContentLoaded", function() {
  // Register ScrollTrigger plugin
  gsap.registerPlugin(ScrollTrigger);
  
  // Get all images and panels
  const images = gsap.utils.toArray('.panel-image');
  const panels = gsap.utils.toArray('.panel');
  
  // Set initial states
  gsap.set(images[0], {opacity: 1}); // First image visible
  gsap.set(images.slice(1), {opacity: 0}); // All others hidden
  
  // Create image transitions
  panels.forEach((panel, i) => {
    // Skip the first panel since its image is already visible
    if (i === 0) return;
    
    ScrollTrigger.create({
      trigger: panel,
      start: "top center",
      end: "bottom center",
      onEnter: () => animateImage(i),
      onEnterBack: () => animateImage(i - 1),
      markers: false // Set to true during development to see trigger points
    });
  });
  
  // Animation function for images
  function animateImage(index) {
    gsap.to(images, {
      opacity: 0,
      duration: 0.5,
      ease: "power2.out"
    });
    
    gsap.to(images[index], {
      opacity: 1,
      duration: 0.5,
      ease: "power2.in"
    });
  }
  
  // Add some additional animations for text panels
  panels.forEach((panel, i) => {
    const panelInner = panel.querySelector('.panel-inner');
    
    gsap.from(panelInner, {
      scrollTrigger: {
        trigger: panel,
        start: "top 80%",
        end: "top 20%",
        scrub: true
      },
      y: 50,
      opacity: 0,
      duration: 1
    });
  });
});
</script>

.scrollsection {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
}

.scrollsection-inner {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 100vh;
}

.images-container {
  position: sticky;
  top: 0;
  left: 0;
  width: 50%;
  height: 100vh;
  overflow: hidden;
}

.images-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.panel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.panel-image:first-child {
  opacity: 1;
}

.panels-container {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.panel {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

.panel-inner {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 8px;
  max-width: 80%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.panel h2 {
  margin-bottom: 1rem;
  color: #333;
}

.panel p {
  line-height: 1.6;
  color: #555;
}

/* Custom styling for Karmal Cervus branding */
.panel:nth-child(1) .panel-inner {
  border-left: 5px solid #3366ff; /* Blue for Cervus Pass */
}

.panel:nth-child(2) .panel-inner {
  border-left: 5px solid #ff6633; /* Orange for Offers */
}

.panel:nth-child(3) .panel-inner {
  border-left: 5px solid #33cc66; /* Green for Trellis */
}

.panel:nth-child(4) .panel-inner {
  border-left: 5px solid #cc66ff; /* Purple for Opportunities */
}

.panel:nth-child(5) .panel-inner {
  border-left: 5px solid #ffcc33; /* Yellow for Rewards */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .scrollsection-inner {
    flex-direction: column;
  }
  
  .images-container {
    width: 100%;
    height: 40vh;
  }
  
  .panels-container {
    width: 100%;
  }
  
  .panel {
    min-height: 60vh;
  }
}

<div class="scrollsection">
  <div class="scrollsection-inner">
    <!-- Images Container (Sticky) -->
    <div class="images-container">
      <div class="images-wrapper">
        <!-- Your images here -->
        <img src="image1.jpg" alt="Karmal Cervus Pass" class="panel-image" />
        <img src="image2.jpg" alt="Browse Offers" class="panel-image" />
        <img src="image3.jpg" alt="Trellis System" class="panel-image" />
        <img src="image4.jpg" alt="Complete Opportunities" class="panel-image" />
        <img src="image5.jpg" alt="Receive Rewards" class="panel-image" />
      </div>
    </div>
    
    <!-- Text Panels -->
    <div class="panels-container">
      <div class="panel">
        <div class="panel-inner">
          <h2>Get Your Cervus Pass</h2>
          <p>The journey begins with a Cervus Pass, your digital passport to the Karmal ecosystem. Purchase your annual NKIND Validation for $50 to activate your account and gain full access to volunteer opportunities and rewards.</p>
        </div>
      </div>
      
      <div class="panel">
        <div class="panel-inner">
          <h2>Browse Available Offers</h2>
          <p>Explore a wide range of Offers through the app - from grocery cards to event tickets, travel vouchers to professional services. Each Offer shows what volunteer work is required to earn it.</p>
        </div>
      </div>
      
      <div class="panel">
        <div class="panel-inner">
          <h2>Understand the Trellis System</h2>
          <p>Each Offer has a "Trellis" showing the colored Points needed: B.R.Y (Blue, Red, Yellow), P.O.G (Purple, Orange, Green), and B (Black). The probability meter shows your likelihood of securing the Offer before supplies run out.</p>
        </div>
      </div>
      
      <div class="panel">
        <div class="panel-inner">
          <h2>Complete Volunteer Opportunities</h2>
          <p>Sign up for Opps that match your schedule and interests. Karmal handles all the logistics - from background checks to training. Each completed Opp earns Points toward your desired Offers.</p>
        </div>
      </div>
      
      <div class="panel">
        <div class="panel-inner">
          <h2>Receive Your Rewards</h2>
          <p>Once you've earned the required Points while supplies last, you'll receive your chosen Offer! Points remain valid for 24 months, giving you flexibility to earn at your own pace.</p>
        </div>
      </div>
    </div>
  </div>
</div>