Give section display: flex; overflow: auto and put content inside
essentially you just position items next to each other horizontally and that's it, flex is a way to do it
its the same in figma autolayout actually
figma autolayout is basically simplified flex
This is what I was doing but I must be missing something, can't get it to work.
always lead with shared project link to avoid us asking what the problem is and just see it
so you have direction vertical
wasn't logical to set it to horizontal?
width of the container to full screen width
I had it set to horizontal before, didn't work for some reason
I made a bunch of changes, here is a big picture:
- set a container that has full screen width, e.g. 100vw and overflow auto
- add to it a container that is flex and direction horizontal
- set items to s certain width and set on them flex grow
I think you were missing point 3
closed it, feel free to delete the share link
basically you want something that has the size of the window and is scrolling
and inside of it you want something that holds the horizontal layout
its quite simple, but once I started I noticed a few things that you would have to know
actually might even work with one container, let me try
yeah works with one container
only thing you were missing is that flex grow on children
if you set a fixed width on them it won't work if its a flex container
flex defines how item is growing
you can also use flex basis instead of width
okay so now it scrolls horizontally if you scroll horizontal. My bad, I meant for it to move horizontally while scrolling vertically. So sorry
you want to scroll vertically the entire page but your horizontal list would scroll horizontally?
no just that section. I'll go look for an exampple
I think you are talking about an animation/interaction effect that's popular
this is impossible with just regular html, right now you would need gsap for this, but we are releasing animation engine in the next weeks which will allow to build this visually
yeah this is what I am describing above, this is an animation
okay so nice to hear that this will be possible with animation engine. Been trying to wrap my head around Gsap, quite time consuming. I'll have a bit of patience instead 🙂
using AI you might get there with gsap too, but still need to apply correctly all that to the canvas in webstudio
thanks so much for the input!
and sorry for the misunderstanding, have a nice day
Hi! Any chance you know how to make horizontal scroll work with the mouse wheel? So it is not horizontal wheel dependent?
Will it be implemented as CSS code?
Not at the moment because css syntax has poor support in browsers. So we use web animation api + super fast js polyfill for ScrollTimeline. Though eventually we may switch to css under the hood.
As stated in comments, aria-label attribute can solve the problem above
