Flawless Horizontal Scrolling in Webflow

hey how's it going today we're going to have a look at how to build these horizontal scrolling sections similar to like you see on the iPhone 14 pro website here I'm just scrolling up and down and we're getting some horizontal scroll we're going to build it all in webflow with webflow interactions so let's get started hey there web bae all right so you can see here that I have two full page divs start in Finn and then in the center here I have horizontal score wrap which isn't currently doing anything now the principle behind this horizontal scrolling section is that you're going to have a div called height that controls the height and then within that it's going to be position relative and we're going to have another div nested inside with position sticky which is this green one here and as we we're going to create an interaction while scrolling through height and where sticky is going to stay at the top of the viewport the Mover is going to translate to the left eventually by the time sticky gets near to the bottom here we want the Mover to come all the way to the left okay let's start we have horizontal scroll wrap selected here we're going to drop in a div and I'm going to give this a class name of height this is the div that controls the amount of height that we have or really in this case kind of the speed that we're going to scroll through so I'm going to give it 400 Dynamic viewport Heights for now the other thing I like to do while I'm building these interactions is add a gradient to the height just so I can see really clearly what's going on so we can see here as we're scrolling through it's going from black all the way to White down to our last div there alright so within height we said we're going to need a sticky div so we have a new div block here and we'll give it a class name of sticky and let's be true to that class name and set position to Sticky with top set to zero and now we can see here it's relative to the body and we want it to be relative to our height div so we'll come to height and change this to position relative and now when we select position sticky we can see it's relative to height now everything within sticky is going to get display flex and you'll see why this comes into play later so I went ahead and put click display flex and you can see here that it's kind of collapsed in size so let's set our width to 100 of our parent which in this case is height and our height to 100 Dynamic viewport Heights we want sticky to be like kind of a full window for us to look at Okay so we've got our sticky div here let's go ahead and add another div and this is going to be our mover now so we'll call this mover and we can see that since we have sticky set to display Flex mover is set all the way on the left here it's set to automatically shrink if needed anyways mover doesn't need much again remember we're going to set it to display flexed and we can leave everything else B for now let's drop another div within mover and this one I like to call Flex offset you'll see what this is going to come into play with later but this is going to house all of our sections now it's also going to get display Flex with all the default webflow settings here for a line stretch and justify start okay now let's go ahead and drop our sections not divs we want sections now so we've got a section here and I'm going to give it that same class a full page and full page here just has a height of 100 Dynamic viewport Heights with a line and justify in the center now I'm going to give it a combo class of is horizontal scroll section and that's just because I want to give it some sort of width so we'll give our width here something like a hundred viewport widths so that it takes up the full width of our screen and I'm going to drop some text in there just so we can see something going on and I'll say this is section and then I'm going to copy and paste so I duplicate full page three times and now we can see I kind of have some actually bad horizontal scroll that I don't want I'm scrolling left and right with the mouse here and I'm going and I'm seeing these other sections and we can tell because we don't have that gradient background so this is the bad kind of horizontal scroll and you have to be careful with position sticky when you set any of its parents to overflow hidden then sticky won't work so like if I took height and set it to Sticky now or sorry and set it to overflow hidden our sticky is gone so let's remove that and come back on sticky and set it to overflow hidden and now our sticky div is still there and I can't scroll to the right here do that horizontal scroll if say I did need to edit what was going on in the other sections I could just set overflow to Auto and scroll over to the right here and call this section two and call this section three and call this section four okay now something else I like to do is on our sections I just want to set a bit of a 2 pixel border just so we can see everything that's going on here so we've got that going on we should go back to Sticky and we should set our overflow back to Hidden and we should be ready for our interaction now I'm going to go ahead and select the div with the class name of height which is again the one with that big gradient that has all of the height on it and we'll click interactions and we'll add a wall scrolling in view interaction we're going to play a scroll animation and we want it to start when the element is fully visible and we want to end when the element is fully invisible and I have this one horizontal scroll let's go ahead and delete that and we'll create a new one called horizontal scroll and at zero percent we're going to start moving our mover well at zero percent it's not going to move anywhere we're going to set its initial position to be zero percent on the x-axis and then at 100 you can see as I start scrolling this here so we went negative 500 pixels let's change this over two percent we want to start scrolling through our sections so if we get all the way to negative 100 we can see that all of the sections are out of view and if we go ahead and live preview this we can see I'm at the start here and I'm scrolling down we're fully in view so our interaction starts section two section three section four and then down at the bottom here the one problem we have is that our 100 doesn't happen until that height Dave is fully out of view so we've got to use our Flex offset div to help us out there so what I'm going to do is on Flex offset I'm going to give this negative 100 viewport widths of right margin and that's going to push everything over to the right so if I come back up and I watch our interaction now and I start scrolling it starts just as we want Section 3 section 4 and then we get down to the bottom at a better timing so like right when the interaction is over section 4 is fully in view but we're also coming out too soon so there's one other thing we can do to solve that so to solve that let's select our sticky div and give it a bottom margin of negative 100 viewport Heights that way it's going to essentially pull our sticky div down we can see section 4 now overlaps our finish div but then we don't want these two divs to overlap so we need to pull the whole thing up as well so now we'll come to our horizontal scroll wrap and to offset that negative 100 viewport Heights we'll give padding bottom of a hundred viewport Heights and now if I scroll to the top and click the eye icon so we can see our interaction starts right when we want it to we scroll through all sections and section four is at the end and then we come down into our finishing section here so this is how to set up perfect horizontal scroll in webflow and you could do anything you want within each of these sections you know these can all be their own layouts I have them all the same right here but let's go ahead and say is two and actually this was the first one so I'm going to grab the second one here and I'm gonna say is two and I'm going to set this width to something like 50 viewport widths and then is three and I'll give this width something like I don't know uh 500 pixels we set at the start and we can see now our interaction will still work so section two is only 50 viewport width section three is whatever 500 pixels section 4 is back to 100 viewport widths and then we're scrolling into the finished section here so I hope this helps you come up with some really cool horizontal scrolling sessions for your website if you want to you can use this with CMS as well and I will show you how to do that in a future video alright as always thanks for watching and I'll see you in the next one

Channel: Web Bae

Views: 8,493

Keywords: horizontal scrolling, horizontal scrolling webflow, horizontal scrolling website, horizontal scrolling css, horizontal scrolling figma, horizontal scrolling website tutorial, horizontal scrolling text premiere pro, horizontal scrolling text after effects, horizontal scrolling react, horizontal scrolling website figma, horizontal scrolling mouse, horizontal scrolling squarespace, horizontal scrolling framer, horizontal scrolling adobe xd, horizontal scrolling text premeire pro

Id: nyNLWHPooxM

Length: 8min 2sec (482 seconds)

Published: Tue Aug 01 2023