onScroll trigger section reveal from RTL using gsap React js

[Tehsin]

 

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

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

If you're new to GSAP check out these awesome getting started guide https://gsap.com/resources/get-started

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Tehsin]

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

[mvaneijgen]

Hi @Tehsin welcome to the forum!

 

You were so close! All you needed to do was to add ScrollTrigger and you would be done! I've removed the second part of your tween, because GSAP is smart and it can just play a timeline in reverse to get the same effect.

 

See the Pen oNmbGgK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Maybe this one is going a bit to fast, so I have another one that increase the scroll distance based on the amount of boxes and how hight the browser window is. 

 

See the Pen mdvVBeP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

I've deleted your other topic, because there is no need to create a new post on these forums, every topic will be answered in due time, you'll just need a little patience.

 

Also to get even better help here share your not working pen. We love to see what you did wrong originally, that way we can see your thought process and thus better help you understand the tools!

 

Hope it helps and happy tweening!