onScroll Effect using gsap React js

Question

I have main section in I have a HERO section when I scroll down to horizantle-scroll-wrapper then these 3 boxes should slide from right 100% to 0% onScroll mean when I scrolled down hero then box 1 will scroll from RTL when it reach 0% then If I further scroll then 2nd box will scroll according to scroll value. when all boxes are scrolled then body will move down to footer.

When I scroll from footer (bottom to top) my horizantle-scroll-wrapper content which alread moved from RTL now it should move LTR. Note We have to use GSAP

//HTML

 <div class="main">
      <div class="hero box">
        <h1>hero</h1>
      </div>
      <div class="horizantle-scroll-wrapper">
        <div class="orange box">
          <h1>1</h1>
        </div>
        <div class="purple box">
          <h1>2</h1>
        </div>
        <div class="green box">
          <h1>3</h1>
        </div>
      </div>
      <div class="footer box">
        <h1>Footer</h1>
      </div>
    </div>

//CSS

.main {
  height: 100vh;
  overflow-x: hidden;
}

.box {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
}
.purple {
  background-color: purple;
}
.orange {
  background-color: orange;
}
.green {
  background-color: green;
}

//JS gsap

gsap.to(".orange", { xPercent: 100, duration: 2, delay: 1, });