fschaff

Hi Rodriguo, Thanks a lot, it's exactly that!

Yes, thanks!

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

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!

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

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!

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!

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