[convert scroll trigger animation to react js]

Hi, I have tried this in simple gsap now I want to do it using react gsap.

Kindly guide me, how can I do that what  I have to import

See the Pen zYerjYz by tehsin118 (@tehsin118) on CodePen

[onScroll trigger section reveal from RTL using gsap React js]

here is codepen code which I have tried. 
I have developed it automated but I want it on Scroll trigger. I tried but failed. 

 

See the Pen GRzoEeP by tehsin118 (@tehsin118) on CodePen

 

<!-- When I reached onScroll-horizontal-wrapper then Boxed should reveal from right to left. 
As much I scroll box will reveal from Right to Left when the last box is revealed I will scroll down to the footer.
When I scroll up boxes will reveal Left to Right and when our box-1 is revealed it will go to the top.  
-->
<!--onScroll-horizontal-wrapper will have overflow hidden only 1 box will reveal one time   -->

[onScroll trigger section reveal from RTL using gsap React js]

 

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;
}