Horizontal move on Vertical Scroll

Hey there,

I want to make a section scroll horizontally when scrolling vertically. Just like webflow.com does.

Here’s a quick gif I threw together on how this should work.

Those rectangles should still be hoverable - I trigger mp4 play on hover
The section would not be 100vh, is that doable?

Where do I start implementing this? Thanks!!

Hello @maartin

Here’s a video about it :slight_smile:

Thanks for the reply @donaldsv

This is what I currently have: https://preview.webflow.com/preview/horizontalscroll0?utm_source=horizontalscroll0&preview=0ddd25a856e2b6079769cc249b666568

I have problems with stopping the ‘vertical scrolling’ at the moment when horizontal scroll starts.

I’m a bit lost. :slight_smile:

Here’s a better tutorial for what you are trying to design.

Let me know if you need further help!

Thanks again @donaldsv

I actually do have another question - is there a chance for the horizontal scroll section to not be 100vh, so next section is always visible on the bottom and once horizontal scroll is finished it scrolls normally? you can see my previous demo above - where there is section like 150px below the element i want to scroll horizontally.

I’ve tried somehow giving bottom section a fixed position and animating it, and I have tried to give overflow:hidden to a section, so instead of like 500vh(same as horizontal place) only like 400px would be visible, but then the horizontal scroll doesnt work. Is there any way to overcome this?

I still hope this above is possible. However…

… if that is not possible to do with webflow, I would alternatively do something like this: Image 2018-09-21 at 9.52.01 PM

But I cannot figure this thing out either - when you click on arrow and one new element scrolls into view from right. I could use a slider, but then it would slide all four altogether and I probably wouldn’t be able to put mp4 on each tile hover (see OP).

Thanks!

Hi @maartin

Here’s a clonable project so you can reverse engineer it. :slight_smile:

https://cl.ly/ba32da1eeb1c
https://webflow.com/website/horizontal-scrolling-with-css-sticky

Hope this helps!

Thanks @donaldsv , I have one extra question :slight_smile:

Right now, I’ve set it so it looks perfect on Macbook Pro (1440x900), but when I look it on 27’ screen, since the VH is much bigger, the element scroll all the way through and beyond, so there’s probably 1600px of blank space before the ‘section 3’ appears.

Is there a solution to this, so it looks exactly the same on all screen heights? I opened your cloneable project and see the same problem there.

Thanks a ton!

Hi @maartin

You can play around with the move interaction. Try to set the move to -59VW it’ll look a lot better, then you can just play with it until you get the perfect number for all screen sizes :slight_smile: I also updated my clonable project if you just want to reclone it!

Capture

I am looking to accomplish this same thing with a horizontal scroll section that does not take up 100vh. Were you able to come up with a solution for this?
Thanks