Tehsin

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

here is codepen code which I have tried. I have developed it automated but I want it on Scroll trigger. I tried but failed. https://codepen.io/tehsin118/pen/GRzoEeP <!-- 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 -->

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