<div class="container">
    <div class="scroll-section one">
    </div>
    <div class="scroll-section two">
      <div class="enlarge-box"></div></div>
    <div class="scroll-section three"></div>
    <div class="scroll-section four"></div>
  </div>

body {
  margin: 0;
  font-family: Arial, sans-serif;
  overflow-x: hidden;
}
.container {
  display: flex;
  width: 400vw; /* Four times the viewport width for horizontal scrolling */
  height: 100vh;
  align-items: center;
  justify-content: center;
  position: relative;
}
.scroll-section {
  flex: 1 0 100vw;
  min-height: 100px;
  position: relative;
}
.scroll-section.one { background-color: lightblue; }
.scroll-section.two { background-color: lightgreen; }
.scroll-section.three { background-color: lightcoral; }
.scroll-section.four { background-color: lightgoldenrodyellow; }
.enlarge-box {
  position: absolute;
  top: 25px;
  left: 50%;
  width: 0%; /* Start with 0% width */
  height: 50px;
  background-color: blue;
}

gsap.registerPlugin(ScrollTrigger);

// Horizontal scrolling for the container
gsap.to(".container", {
  x: () => -(document.querySelectorAll('.scroll-section').length - 1) * window.innerWidth,
  ease: "none",
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    scrub: true,
    start: "top top",
    end: () => `+=${document.querySelector(".container").offsetWidth}`,
    markers: true,
  },
});

// Animate the enlarge-box width incrementally
gsap.to(".scroll-section.two .enlarge-box", {
  width: "50%", // Animate to 50% width
  scrollTrigger: {
    trigger: ".container", // Horizontal scroll container
    start: () => {
      const sectionTwo = document.querySelector(".scroll-section.two");
      return sectionTwo.offsetLeft + sectionTwo.offsetWidth / 2 - window.innerWidth / 2;
    }, // Start when .scroll-section.two's left edge is precisely centered
    end: () => {
      const sectionThree = document.querySelector(".scroll-section.three");
      return sectionThree.offsetLeft + sectionThree.offsetWidth / 2 - window.innerWidth / 2;
    }, // End when .scroll-section.three's left edge is centered
    scrub: true, // Sync animation with scroll
    markers: true, // Debugging markers
  },
});