Build a STICKY NAVIGATION with CUSTOM SCROLL ANIMATION in Webflow step by step

hi fellow webflowers in this video I'm going to show you how to build this sticky navigation including a custom animation like this so without further Ado let's start [Music] so here we have our basic setup for a webflow project and first thing I'm going to do is I'm adding the navbar I don't like the standard class names webflow is giving the elements so the first thing I always do is I replace the standard class names I called this one Naf and I also don't like the container because uh with the container with this container element here you can't do a flex box and distribute with space between it is always centering the stuff like that so it won't work that's why we use a div and um I call this nephrepper and I'm going to move all the elements from the container to this Naf wrapper and we call this one nav brand and this one nav menu those will be the nav links I copy that class name and also bring it to the other ones so let's call it Nev ham wrap and the icon Neff hemp so now we have our standard class naming and now we are going to style it first thing I I want the nav to be 100 with and also the nav wrapper to be 100 with and the width we are we are going to use uh flexbox we align everything Center and justify with space between and yeah we can delete the container give it a Max width of 1600 pixels and an em a padding of 3M left and right and in the nav brand we want to place a logo and I'm using an embed field for that and I've prepared a little logo in Sigma here you can see it it's nothing special um I right click on it and choose copy as SVG and this you can paste in your embed field and yeah there's some stuff you can get rid of for example the width and height you can get rid of and uh I don't know what this what this is uh yeah it probably won't be in your logo but we can get rid of it here and the next thing is I want to replace all colors with current color copy that you have another one and here and here okay and now you can set it with here let's try 10 yam it looks great I can see that the L is still too dark as in color you can see if you choose something obvious like red you can see the L still stays black so um we forgot to replace some color here yeah it's here so uh now we cut them all so let's uh yeah give it a almost black color and that's the basic setup for the custom navigation we are building um what's missing is we need some some top and bottom padding at the nav element so um let's try 2em nope now 2m looks fine to me and um yeah it's it still has the position relative if you want to make it sticky just go to position and change it to Sticky but you will see it's still not working what you need to do you need to give it a value here on the um on the top position um we give it 0 in this case and you can see now I can scroll the hero scrolling but the navigation stays sticky um there's a little difference between uh sticky navigation and a fixed navigation you can see um have a look at the position of the hero the hero starts right there where the navigation ends and if I change the position of the navigation to fixed you can see that hero moves up because now the hero is behind the navigation but if you're scrolling if I change the height of the hero to something bigger like 200 you can see that I have a Max height here so now you can see I still can scroll and the navigation also stays at the top always so that is something that positions sticky and fixed have in common um but you can see the difference if I replace the background color or when I make it transparent on a on a fixed element you can see now the background of the hero here maybe this looks great on this kind of design and if you change the position to Sticky you can see it now has the background color of the of the body so if I change the color here to something like red or something you can see um it's the background color of the body you see here so when you want to go with sticky you need to give it the the navigation its own background color um let's take a dark gray like this it's fine and uh yeah let's give this also this logo also a custom CSS class call it nav logo and yes now let's change it to White and also these nav links let's change them also to White okay looks great I can scroll let's get back to the hero give it a Max height of 100 and a height of 100 VH and a Max height of 900 pixel so it looks like before we still can scroll a little bit so that's fine um yeah that's now the basic setup of navigation we were using here um and let's make it responsive so in the next step we are going to make this navigation a little bit more responsive so uh to make it responsive you know you have the media queries up here or the breakpoints I have you can also call it and yeah you can switch down here if you want the hamburger icon not already appear on desktop view on on tablet view you can go to the settings here you just need to select the nav bar and now you have this slider here and yeah you can change it to a mobile phone or whatever we keep it on a tablet for now and yeah looks fine for me I'm maybe just decreasing the size of the logo a little bit let's make it 60 M that's fine for me and yeah you can see here the the padding is too much so let's decrease it to Maybe on half VM looks fine and um yeah let's also decrease this padding to something like an half em okay looks fine for me um that's the probably the basic setup for let's decrease it here also a little bit and still like like this in here and half Em's already enough here we can delete it here because it's already on half a m on uh landscape mode yeah looks fine so far stickiness is also working cool next step is that we are going to build a drop down so um a navigation item with a sub menu and if you don't want to add a sub menu to your navigation you can skip on the timeline to the next part of this video but I'm going to build a sub menu with a drop down and also build a custom animation to it and I will build two animations one for desktop and one for mobile because it needs to look different on both so let's start with the drop down navigation so let's add a drop down and we are going to move it here to the front at first I'm going to give it a class called nav drop and I'm going to give it also the color I'm using for the other nav links okay it didn't work here so it's that one nav drop text let's give this the color and it's rename that class here to nav drop icon do the same color um oops change the class name to nav drop toggle and the last one this one it's invisible right now nav drop list okay here we go uh wait here to some drop down links let's also give them nav links I already have that class name okay cool so if we switch to preview mode it should already work now you can see I can click on it and it works but I wanted I wanted a sub menu to look a little bit like this button so let's style it and here I have a pro tip for you if you want to style the sub menu there are two ways to make it visible in the designer to style it the first one is that you go to the settings of the drop and click show here so now it will show the menu and you can style everything but this comes with a problem if you now switch to the drop list you can see it added this active this the state class of open to it and now you're styling the open state of this drop list and if you now would later add an animation to the sub menu you will probably see some flickering because it adds the the class of open and then it styles that open and yeah you will see some flickering when the the styles are changing so I'm not recommending you doing it this way um just go and hide and yeah sometimes even if you go on hike you can see this here and you sometimes you can't click here I would say that's a webflow bug just click on a different element and click back again on here and now you see there's a open state is gone uh so what you rather should do is go to the display settings here and choose block now you can see you have it here and now you can style uh the style the element without any uh other combo classes so I want this to look a little bit like the buttons here so the first thing I do I give it a white background color and a border radius let's see what we've used here 0.6 Ram so let's use the same here and let's choose overflow hidden and now let's add a border okay two pixel and we also use the Box shadow 135 and 3 in distance let's apply that give it a box shadow of three and zero yeah here we go now we've got the Border here we go uh yeah now you can see the text is still right and I gave the links in the sub menu the same uh the the same class then this nav items I actually want to keep keep it to have the same class name because um I want to maybe I want to make some changes on the font size and I want the font sizes if I change them I want to want them to change everywhere consistently without having two parts I need to touch to change the font size so um what I'm going to do is I'm make some structural changes here I have the enough menu I add a class here and I have menu wrap or I can see I gave it a wrong name here I always use wrap instead of wrapper because wrapper is longer so nav menu wrap that's fine enough so and now I can now I can give it a text color here and delete it here and it actually it should stay white but yeah sometimes stuff doesn't work the way you want so yeah let's go back we don't need a wrapper but we can still rename that to wrap and um okay let's just copy that class or let's give it a combo class is or is nav drop okay and now let's give it a here a different color let's copy that combo class and apply to the other ones so here you go and uh yeah now let's give it a little bit more padding let's change it to em so it's better responding to the screen size like this and like this and if you want to you can give it a Min width of something like I don't know 16 em maybe if you want to have it a little bit um bigger than the standard and or it's call it I can type let's call it sub page another sub page and this is a or the first sub page okay just so you have some text differences sometimes help when styling elements if you work with some real content um Okay cool so if you are switching to the preview mode you can see it's still visible that's because uh our drop down element our drop list is still a display block let's delete it so it disappears and if you click here you can see it works but uh yeah it's a little bit stiff it has no animations at all no have a state um nothing is really happening so that's the next thing we're doing now we are going to style it a little bit more and we give it some animations so at first we make our drop list visible again for that we choose the drop list here and choose display block and then I'm going to choose this nav link and we already have a combo class here so we are directly talking to the nav links within this drop down element and we click on this little icon and choose the hover State you can see now we have this green hover State class here and we are going to change the font color it's just a Color Picker here and go somewhere here you can see it turns Violet maybe that's a little bit it's not obvious enough maybe something like this yeah it looks great and let's switch back to the state of non and add a transition here if you want to add transitions CSS transitions you always need to add them at the non-state that's a rule how to use webflow so let's click on transitions you here you have a big list of transitions you could choose all properties if you're lazy if you want to do it the right way and choose font color yeah we go with 300 milliseconds and East that should be fine and if you now switch to the preview mode you can see I can hover over them and they turn violet Violet that's it so next up is that we are creating an animation when we click on the drop down that uh yeah this appears a little bit instead of just uh yeah appearing like that with a finger snip so for that purpose let's change the display settings back to none and now you have to select the nav drop here that's important so follow this step um go to the interactions and create a new element trigger and only if you have selected this not a nav drop and now you have this available drop down opens click on it and we are going to make an animation for desktop only so deactivate tablets and both phone triggers and yeah start animation and let's call it nav open or um nav drop open D for desktop I have a name and let's select the drop list so the first thing we want to do we want to switch its state in hide and show and um let's switch it to display block but if I go to preview mode now and I click you can see it's uh it's appearing directly I don't want that so something you have to do some more stuff so let's work with some opacity um and let's bring the opacity above the hiding show um let's choose zero for the opacity and that's copy that duplicate it and turn it here to 100 and you can already see when I click now you can see it makes some strange stuff um so it goes from 0 to 100 that's fine um I think we have to do like this still doing some strange stuff ah yeah that's why it has a duration of a 0.5 let's give it a duration of zero so if I click now you can see it appears it's already half the way I want it to be like this maybe a little bit quicker um go back to opacity let's use some out Expo that's a little bit too quick now so let's make 0.8 seconds yeah that's cool and let's also move it a little bit so choose move add this here that should start at the all of these three start at the same time now so let's move it down by let's say 1.5 em and right click on it duplicate it and those two should also happen at the same time so let's choose 0am and give it a 0.8 seconds and also out Expo so if you turn on preview mode and I click here takes a little bit long until it happens it's because here we I forgot to make the duration on zero now it works cool um you could also select all three of this and set them as initial States but my experience is that sometimes working with initial States in drop down animations doesn't really work especially as soon as you add some closing animation to it so I'm not setting it as initial States I do that on purpose um but if you don't choose them to if you if you don't select them to be initial State you have to make sure that all of them have a duration of zero so okay looks cool maybe a little bit quicker 2.7 yeah and one more thing I want to add I want this little icon to turn by 180 degrees so let's select it um choose rotate duration zero degrees zero let's duplicate it and give it 180 degrees 0.7 and out Expo yeah cool Rooks so next step is we are going to create the closed animation for this you can click on this little icon oh no it's wrong on on this little icon and duplicate it and click here and start an animation and choose the second animation let's rename it close and yeah my recommendation for closing animations of drop down drop downs and menu elements is always to give them our shorter duration than the opening animation because sometimes you maybe have two drop down elements next to each other in a menu and if the user is clicking on the first and then on the second as most of the times both submenus will overlay and this looks strange so the the old Sub menu should close quicker than the new one opens and that's why you choose a shorter duration here on the closing element so we can delete all those um hide and show we want this to happen at the end because if you have it at the beginning it changes changes the stage to display none and all the opacity and movement you won't see them anymore because it's already on display none that's why we put it at the end a duration actually doesn't matter on height or show because it's weather show or height there is no no duration for it um okay the opacity we turn it to zero and we do this by zero point four seconds we move it up we move it down again by 1.5 em also by zero point four and rotate it back to zero degree zero degrees also by 0.4 so um let's add some eating let's try some how to Expo probably should be fine let's save it and turn to preview mode and you can see it's working fine so that's the desktop animation and the next part is that we are going to create the mobile menu and we need a different animation for that because um you can see if I turn to tablet and I click here you can see it still like looks like this anyway I need to style it and if I click on the drop down now it looks like that doesn't look pretty so we need to make make some CSS changes and we also have to create a different animation for mobile and tablet so at first we leave the preview mode and now you can click on the hamburger icon and go to the settings here and this time it's allowed you can choose show here to show your sub menu or your entire menu in that case um yeah first of all I'm going to give this a flex box I want this one to be oriented left and yeah sometimes I don't know why sometimes stuff like that is not working give it a width of hundred percent and still not working um okay let's try some magic here uh give it a nav menu rep now we can put all of them in here come on just and yeah now give this one 100 width and flexbox vertical and yeah I wanted to Center next up is I go to nav menu and I give it a height of 100 or no not 100 100 viewport height like this and this nav menu wrap this one gets 100 height and also 100 width and yeah we can Center stuff like this actually cool so yeah and first let's change the background color it's a little bit ugly that gray in this context at least um let's do like this and make it a little bit darker okay cool and also this one don't know why this has this ugly background color by default but let's also choose that color and next step is that I'm going to increase the font size for that something like this looks great also here let's use 2m oops like this and let's give the nav links a little bit more padding so let's try 1.5 em each of them looks great we also have to add this to the Naf drop down so we have consistent spacing like this and I'm also giving giving them all a width of hundred percent let's give them flexbox as well just and nav links like this cool so if you go to preview mode you can see it comes in like this view now click on it you can see that's the that's no that's no animation but you can see we have to do something about it it looks broken um so again choose your nav drop list here and remember don't click on show click here on display like this and um yeah first of all I want to get rid of the Border radios I don't like the water radius in this context let's choose zero here we also don't need a border here that's cool and we don't need a absolute positioning because of the absolute positioning it is covering the um the the the the drop down text so I'll give it a position of relative and yeah now we have to select the drop element and make this display flex and instead of horizontal we choose a vertical direction to grow like this exactly I just can see right now the spacing is inconsistent you can see it has no spacing at the bottom um so 1.5 em would work like this let's see how it looks like when it closes nav drop now we have too much spacing so let's get rid of this one so it looks fine okay and if I open okay the spacing is consistent um instead of here yeah we need some padding within the drop list let's make it visible again here we go and let's give it some padding also 1.5 em actually it's cool and let's change the background color why it doesn't look great here let's try it with a a little bit darker color like this sorry that's not a design class here it's more about functionality that's why it's not the greatest design but I think you get a point um so and now oh no that's the wrong one and the the text we want to be white oh like this okay cool so you can see it's already working but yeah it looks a little bit stiff everything is uh just um appearing instantly and jumping around uh doesn't look nice so let's create a mobile animation for that so to make the animation at first you select the nav drop again and create a new trigger because this time we are making a animation only for tablet and mobile so choose drop down opens deselect deselect tablet deselect desktop and choose start an animation and create a new animation let's name it nav open ER nav drop open t and let's select the nav drop list and at first we need to change its hide and show settings um change it to display block and the next is that we are changing its size we are changing the size from um height zero with a duration of zero so that's the start to hide Auto with 0.8 and Expo so let's see yeah that's working so that's our start animation uh our opening animation and uh let's duplicate that and create our closing animation and let's choose the duplicated animation here let's rename it to close and yeah we can get rid of that here and let's turn the size from Auto to zero pixels and let's have that duration and I think now it's working um yeah cool uh something to notice and meanwhile I've made some little changes to the nav drop because before I was giving it here 1.5 em if you have 1.5 em here the animation won't work proper because if you see now it opens and if I close it you still get this Gap here that comes from Borders or from paddings so that's why I deactivated this padding here if you want to you can add some custom CSS for that you can get this is nav drop and make some first child and last child in the in the custom code with CSS and give it some some uh some paddings yeah so but I think we are fine for that but I think it also looks great if you duplicate that nav drop if you have two drops yeah looks great cool let's delete that one and yeah that's the way you make uh the second animation for uh the mobile layout and the next step we are adding here some lotifier so to find a Lottie file for your Hamburger icon go to lotifies.com and search for hamburger icon and yeah then you will find a lot of icons you can see how the animation works most of them look pretty fast but you can control the speed of the animation later there's just one tip you can see this one is much bigger than this one I wouldn't choose a small one like this because if you put this in your to your webflow website it will look a tiny so rather choose one that better fills the canvas of the logic file and another tip is if you have an account at Lodi files you can go here and change the colors of it for example if you if you need a black instead of white you can select the colors here select the layers here and then change the colors here and then stuff like this will turn white I've already downloaded a Lottie file so let's get back to the designer click here on the on the icon and let's search for Lottie and replace the Lottie sequence uploaded here now you can delete the old hamburger icon and now you can see it's uh yeah it's pretty huge let's switch back to desktop you can see it's hidden here so we only need to style it um on tablet and downwards let's give it a class name like nav ham and give it a Max width of try 3M going to be too big maybe like this or yeah 1.3 you can see it's Auto playing when I switched to preview mode and that's why we need a um animation for it so let's select the lobby file and go to the animations Tab and create a new trigger on Mouse click yeah you can use all triggers but you can deselect desktop if you want to because we don't need it on desktop but it's anyway hidden on desktop so it doesn't matter now you can choose Lottie playback and we don't want a delay sorry don't choose Lottie play with choose start an animation and let's keep it short FM open and here you can choose Lottie um set initial state and choose zero percentage then duplicate that one and uh yeah let's stay with linear for now and most of the times it works better if you choose 99 percent because sometimes at 100 percent um the Lottie file or the hamburger I can disappears in some latify examples I don't know why but sometimes that happens so you can try with 100 and if you see that it doesn't work in this case it works but sometimes it doesn't try 99. um most of the time that's that's the fix for that I don't know why but okay looks fine also uh the duration looks fine and that's the open and on second click we start the animation again duplicate it rename it close and delete that one deselect set as initial state 0.5 is fine linear is fine and zero percentage is fine so let's check it out yeah you can see it works maybe we want the closing to be a little bit faster like this yep yep I like it that way now something is broken enough open enough close okay cool okay works this works as well so let's see how it looks on um landscape mode fine as well and on portrait it looks fine as well okay cool so yeah um that's the build of the sticky navigation um I personally in this design would prefer a fixed navigation so that's a little extra I'm going to show you now how it will look like if it is a fixed navigation you can change that pretty quick just go here and select fixed you can get rid of this zero here and yeah what happens the hero moves under the navigation and the navigation lies on top of the hero and I'm doing that because now I can go to the background color of the navigation and make it transparent and you can see from my point of view this looks much better but I have to do a little change here oops that was a little bit a little bit too much you can see it's not centered anymore so I'm selecting the nav flexbox Center justify Center and now it's fixed yeah I think that looks better if you want to go with the fixed version just do this little step if you want to stay with the sticky version skip the steps and yeah the next part is that we are going to animate the navigation bar when the user Scrolls down on the page so the scroll animation we will make it with a little bit of custom code it's possible to make a scroll animation like this with webflow interactions but they don't work that proper as um with some custom code I tried different variations and I liked the version with custom code the most what we want to happen is we want this nav to um get smaller in height once the user Scrolls so something like this and at the same time we want the logo to get smaller so the user gets more real estate in the viewport for the content and when he Scrolls up again uh we want the the logo and the nav bar to reach its initial state like this so um first of all I'm going to add a section and I call this one spacing section and I give it a viewport height of 100 width I'm just doing that so I can scroll here and again you can also do exact the same steps with the sticky navigation it doesn't matter if the navigation is sticky or fixed in this case I go with the fixed navigation now because I like the gradient behind it um so first thing is we are going to add a new class let's call it nav scrolled and in this class we are going to change the padding here to 0.5 and you can delete it or let's keep it and we go to the logo and We call we had another class and we call it logo scrolled and we change the size to 7 7 is fine okay that's it and now we are going to add a new embed field and here you can here I paste the code for you so basically this here is just something that the code will interact with the webflow JavaScript you don't need to make any changes on that what's important is this here this isn't else so basically it says if the window is scrolled more than a zero that means as soon as the user starts to scroll this will happen and if it's not scrolled this will happen so what we are going to do we are going to add to the ID Navi we are adding a class the class nav scrolled so that's the class we just created and to the ID logo we are adding the class logo scrolled and if it's not scrolled more than zero we are removing those classes so that's what's happening here you can change the ID names you can change the class names and or you just take those ones and then you don't need to make any changes on this custom code so save it I give it a name it's called nav animation or something like that so I don't want this block to appear here in the designer because it's yeah it's over my navigation and yeah I don't want to see it all the time so what you can do is you can give it position fixed and here full um turn the opacity down and I'm copying the class name here go to my custom CSS and yeah I want to add this pointer events none so I can just make a comma here and add my nav animation class and pointer events none this makes the you can click on the item and it doesn't the browser doesn't react with it so you can still click a button under it or everything under it so it's like invisible and not touchable for you and yeah that's the way we want now you can see you don't see it anymore but you can still select it and click on the little icon here to open the custom code so we already created these classes nav scrolled and Logo scrolled and but we didn't add the IDS like this so um that's what we are going to do next Navi and Logo it's pretty easy we want this to happen on the nav item so we go here to the settings tab and we add here the ID Navi and we go to the logo and we add the ID logo and actually that's it if you now go to preview mode you won't see the animation because it's um it's custom it's script and a custom code and script in a custom code doesn't work within the designer you need to publish it and when you go to the publish page you can see it works but it's still uh yeah it works instantly as you can see so we need a little transition for it so go back to the designer choose nav and yeah you can delete the classes because they will be added later uh a little Pro tip I've deleted the classes now and if I go now to the Styles manager and clean up you can see I can delete those two classes here if you do that the classes will be deleted and your custom code won't work anymore because it maybe we'll add the classes but the classes you don't change the the padding and the the width of the logo anymore so I recommend to actually create a extra page where you put elements with this classes you are using for JavaScript so you don't delete them if you clean up your your project can happen and a lot of stuff can break if you if you do that so just keep that in mind um yeah but we wanted to do a transition so select the nav element scroll down to Transitions and I'm lazy this time I choose all properties I say 300 or let's say yeah 300 is fine let's choose and ease out he's out Court should be fine and we do the same for the logo which is a transition again 300 all properties is out Court and publish and now you can see it works with a transition nice and you can also do it a little bit more obvious so for example if you go to the nav and you add our nav scroll class again you can change the background color on it if you want to you can go to backgrounds and just choose again our dark gray and now you can delete the class again and if you publish this and refresh your page when I scroll you can see it is adding the background color as well and I think the transition can be a little longer try 500 and publish it again yeah looks awesome and I think it's already also working on mobile if you want to have different sizings on mobile that's no problem so let's go to tablet or let's add your classes again nav Scrolls and logo scrolled go to tablet because now you can see it's a width of 70m and if I go to um tablet and delete the logo scroll to class you can see it's 6 cm so on tablet actually on scroll the logo gets bigger I don't want the logo to get bigger on scroll so we changed the width here to 5 am and the padding it's the padding is fine okay here the native padding for the Naf element is already 0.5 em and on Nest scroll there's also 0.5 VM so we make a little bit scroll smaller here okay actually we can turn it to zero and on here it's fine okay and the logo let's check the logo as well logo size on landscape is 60 M and also 60m so if we add our class it will turn 5 em okay cool that's fine so let's delete the class again and publish it so now see it works on mobile works on tablet small desktops and on large desktops as well so that's the way you create a custom custom navigation with a custom drop down and you can also create a yeah custom scroll animation for the entire navbar um if you enjoyed that video give it a like And subscribe to the channel for more content like this um yeah see you at the next video bye [Music] foreign

Channel: Designbase

Views: 2,997

Keywords: webflow, webflow navigation bar, webflow scroll animation

Id: xrdBRjjKOII

Length: 59min 54sec (3594 seconds)

Published: Wed Nov 23 2022