But as u can see in the video, it looks like its inserting another 300vh section right after u scroll out of the last row causing an huge black-space.

https://cloud.movavi.com/play/3c84a61c-32e4-498b-b514-07d74585fb02

So my structure is the following:

.sectie-branding (section)
  .branding-row .et_pb_row
  .website-row .et_pb_row
  .activatie-row .et_pb_row

This is my gsap:

gsap.registerPlugin(ScrollTrigger);

const rows = gsap.utils.toArray('.sectie-branding .et_pb_row');

gsap.to(rows, {
  opacity: 1,  // Fade in the rows
  ease: "none",
  scrollTrigger: {
    trigger: '.sectie-branding', // Target the branding section
    start: "top top", // Start when the section hits the top of the viewport
    end: "bottom top", // End when the bottom of the section hits the top
    scrub: true, // Smooth scroll interaction
    pin: true, // Pin the section during the scroll
    anticipatePin: 1, // Adjust pin behavior for smoother experience
    onUpdate: self => {
      // Loop through each row and calculate visibility based on progress
      const totalScroll = rows.length;
      const progress = self.progress * totalScroll; // Get scroll progress based on the number of rows
      
      rows.forEach((row, i) => {
        const rowProgress = progress - i; // Calculate how far we are from this specific row
        gsap.to(row, { opacity: 1 - Math.abs(rowProgress), duration: 0.5 }); // Fade in/out based on progress
      });
    }
  }
});

This is my css:

.sectie-branding {
max-height: 300vh;
  position: relative;
  height: 300vh; /* Simulates scrolling for 3 sections */
  overflow: hidden; /* Prevents overflow outside the section */
}

.sectie-branding .et_pb_row {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Each row fills one full viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.sectie-branding .et_pb_row.active {
  opacity: 1;
}