Scrolltrigger > multiple horizontal scroll

[fschaff]

Hello,

I want to have multiple div horizontal scroll without it taking up the whole height of the page.

In the codepen, if I have only one div horizontal, all is fine, but I have more than one, it doesn't work.

Do you see a solution?

Thanks

See the Pen JjzKwEe by fschaff (@fschaff) on CodePen

[Windpixel]

Hi fschaff,

Thanks for the colour coded minimal demo, that made easy to see the issue.

First thing I noticed is that the pin and horizontal end of the was happening too soon, so I inspected the width of the horizontal container holding your four slides. It was quite a lot less than the total width of the four slides.

So I set a fixed width of 100vw to the slides, and then set the width of .horizontal to width: max-content. I did a couple of other minor tweaks to the colours just to check if the slides were moving ok.

So I then think you wanted to add a second horizontal sliding section?, so if you duplicate the html for a second "set", the existing JS will try pinning all the containers, which wont work.

So we need to apply the logic and gsap to each .container separately.

In the demo below, the code loops throw all the ".containers" ( I call them scenes) , then the ."horizontal" sections and, then the slides, creates the timelines and pins only the parent "scene" for each.

Please check the JS in the code pen below for e break down of what is happening in each line.

Does this help? Please let me know if you have any questions.

See the Pen zYbByQe by windpixel (@windpixel) on CodePen

[fschaff]

Hi Windpixel,

Thanks for your answer, ideally the differents sections should be in the same ".container". Do you think it is possible? We see in my first codepen the second marker "start" (of the second div ".horizontal") appears before the first animation is over.

Thanks!

[mvaneijgen]

Sure that is possible, but then still there needs to be a wrapping element created that encapsulates the elements you want to pin.

 

To create pinning elements extra space needs to be created, so that the natural scrolling of the page stays in intact and for ScrollTrigger to do its thing. Using the .container as the pin will create the extra space underneath that element, but that doesn't work in your case because the second pinned element is also in that same container. So you'll have to create an extra div that wraps the elements you'll want to pin. Here the same setup as @Windpixel but with an element called .myPin that wraps the top and bottom section for each .horizontal section. 

 

HTML and CSS are really important when working with GSAP & ScrollTrigger and it will save a lot of development time to just be able to sprinkle in some extra divs from time to time. 

 

See the Pen KKEgPgB?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[fschaff]

Thanks mvaneijgen,

I understand the logic here.

To explain a little more my purpose, the markup will be generate page per page by an editor via a CMS, he will decide to have vertical and horizontal sections in the order that he want, so I can't easily wrap sections together.

Do you see a proper way to do that? Thanks!

[Windpixel]

1 hour ago, fschaff said:

Hi Windpixel,

Thanks for your answer, ideally the differents sections should be in the same ".container". Do you think it is possible? We see in my first codepen the second marker "start" (of the second div ".horizontal") appears before the first animation is over.

Thanks!

Are you saying you want one full height 100vh screen with two horizontal sections in view? The first one scrolls horizontal scrolls all the way through and second one scrolls all the way across. 

 

Im sure we can can find a solution to what you are after, just need a little more clarity sorry

[fschaff]

I want to say that the markup can change from one page to another. It is build on demand by the editor.

So I can have that : 

<div class="container">
  <div class="section section1">
    section1
  </div>
  <div class="section section2">
    section 2
  </div>
  <div class="section section3 horizontal">
    <div class="slide">slide 1</div>
    <div class="slide">slide 2</div>
    <div class="slide">slide 3</div>
    <div class="slide">slide 4</div>
  </div>
  <div class="section section4">
    section4
  </div>
  <div class="section section5 horizontal">
    <div class="slide">slide 1</div>
    <div class="slide">slide 2</div>
    <div class="slide">slide 3</div>
  </div>
  <div class="section section6">
    section5
  </div>
</div>

or that for example : 

<div class="container">
  <div class="section section1">
    section1
  </div>
  <div class="section section2 horizontal">
    <div class="slide">slide 1</div>
    <div class="slide">slide 2</div>
    <div class="slide">slide 3</div>
    <div class="slide">slide 4</div>
    <div class="slide">slide 5</div>
    <div class="slide">slide 6</div>
    <div class="slide">slide 7</div>
  </div>
  <div class="section section3">
    section 2
  </div>
  <div class="section section4">
    section4
  </div>
  <div class="section section5 horizontal">
    <div class="slide">slide 1</div>
    <div class="slide">slide 2</div>
    <div class="slide">slide 3</div>
  </div>
  <div class="section section6">
    section5
  </div>
  <div class="section section7 horizontal">
    <div class="slide">slide 1</div>
    <div class="slide">slide 2</div>
  </div>
</div>

or that : 

<div class="container">
  <div class="section section1">
    section1
  </div>
  <div class="section section2 horizontal">
    <div class="slide">slide 1</div>
    <div class="slide">slide 2</div>
    <div class="slide">slide 3</div>
    <div class="slide">slide 4</div>
  </div>
  <div class="section section3">
    section 2
  </div>
  <div class="section section4">
    section4
  </div>
</div>

And the same code have to work for all this possibilities

[mvaneijgen]

You could calculate the start of the next ScrollTrigger based on the end of the previous ScrollTrigger, but I don't know what kind of bugs that will introduce for the rest of the project and I'm the opinion that I rather tweak some things in HTML or CSS instead of creating elaborate JS fixes. So I would personally find a way to always have a section above and below the section your horizontal section or just make the requirement that horizontal sections should always be 100vh. You could of course add a border to the top and the bottom of each horizontal section that are the same color as the sections above and below it, so .horizonal 60vh border top 20vh border bottom 20vh, that way you do have a 100vh section, but it looks like it is the same height as it is now. 

 

But you're the developer, so you'll have the pick the solution that you're most comfortable with with your current skill level. Hope it helps and happy tweening! 

 

See the Pen qBvaBZm?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[fschaff]

Yes, I agree with you, maybe it's a better solution to work with design and have a 100vh height on the horizontal sections, or something like that.

Thanks all for your help!

[fschaff]

Your codepen is almost perfect, but the calculation of the next start seems false: 

if (counter > 0) {
  start = `${stArray[counter - 1].scrollTrigger.end} 50%`;
}

But I don't know why, do you we have to consider the height of the previous container?

Thanks 

[mvaneijgen]

3 hours ago, mvaneijgen said:

but I don't know what kind of bugs that will introduce

That is why I said this. Again I would go with the most simple solution, so that you don't have to jump through hoops with Javascript to get things to line up. Probably with enough resources and development time you could get it to work, but it is up to you or your clients budget how much they want to invest in it. 

 

I've marked the topic for you in the hopes that someone else has a silver bullet solution for you, but I'm out of ideas at the moment 🤷‍♂️

[fschaff]

Yes, thanks!

[Rodrigo]

Hi @fschaff,

 

Maybe this demo can help:

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

 

Happy Tweening!

[fschaff]

Hi Rodriguo,

Thanks a lot, it's exactly that!