Creating an animated menu in Webflow - Live Stream - 11/08/2021

hi everyone uh welcome to today's live stream uh my name is john with webdev4u here to help you build awesome websites without code in webflow if you're new to the live stream i do these live streams every monday through thursday from 12 pm to 1 pm central and i go over everything webflow how to use webflow how to build layouts with webflow i go over different design systems i also go over how to create animations and interactions in webflow i also provide support via the super chat feature on youtube so if you need if you need help with a personal project you can just drop a super chat um any amount is fine it just helps support the channel it helps support me uh to do this every day so yeah that's the the super chat feature it's just the dollar sign here in youtube and you can also send stickers i believe all right so we have a fun live stream planned for today and i'll just jump right into it so today we're going to build this menu so last week i spent quite a bit of time on just building layouts and gradients and things like that so this week or maybe just today i want to focus on creating a cool menu like a nice menu interaction so i found this white this website here called it's the url is lyron moran interiors.com and i'll post it in here in the chat hey dylan yep so we're going to be building this menu so if we click we can see we have three panels coming in and then we have this effect when we hover over each menu item so we're gonna focus on this effect and and this menu here uh so it's just a nice effect i think it'll be a a fun demonstration of the power the power of web flow and the different things you can accomplish um so last week we did build this layout which i built here i'm not gonna finish it let me know if you want me to finish it but it's just a lot of little details like typography and social icons but i just mainly wanted to showcase building this grid layout in web flow but this was last thursday so we might just leave it at that as far as like adding other elements that can easily be done in webflow using layout properties like flex and alignment tools like margin and padding um so i feel like i covered mostly what i wanted to cover with this layout so we'll move on to a cool interaction today i think it'll be fun it'll be a nice break from just building layouts and um yeah thanks maverick thanks i appreciate it actually um i might have to what's what's the word bite bite my words or not by my words but like i might have to because i know i said i probably wouldn't use a client for a system but i am considering it for this client project which um kind of a testament to the fact that finn suite took their time to build a system that um that we could try and use for for for our build so i might attempt it or i might pick and choose different concepts from the client first system um yeah thank you jojo appreciate it um yeah it was it was a lot of fun and yeah definitely got to give it more credit because i just like the organization of it um i still have to wrap my head around the you know div block and adding margin and padding to apparent div but now that i'm i started to think about it it's very it's very similar to me adding wrappers i like to use wrappers a lot in my builds so you'll see me name div blocks like give it a a a name then dash wrapper which is similar to applying uh or creating a div block just for margin and padding it's kind of similar concepts we're still wrapping components and elements in a div so it's gonna take me a moment to see if i really want to to use it but i'm considering it for for this next client project uh eat your words that's it yeah yeah thanks dylan appreciate it um i always try to find these interesting sayings sometimes i can't quite remember them um so so yeah let's go ahead and build this so i was messing around with this effect you know like if we look at this um this menu if we open it it has a really cool uh menu that comes in and then when you hover the text flips so as i was looking at this effect i was like in order for this to be possible the text would have to be even spaced between and let me show you what i mean by that so if i go into webflow and i change the font to something else like let's say montserrat for example and i make it all capital case and then i try to flip it like rotate it you notice that the m goes over the e so i'm going to showcase how i did all this like don't worry if like i you feel like i jumped 10 steps ahead um basically i'm just rotating it and i pl and i applied uh child perspective so we can get that 3d feel um so when i rotate it the m is over the e so i thought to myself well the m is wider than the e so i do need a font that is the same width across like for all letters and then i looked for uh mono space fonts and then i realized mono space that makes sense mono space one space or same space so i went and on google and i typed in mono space or like i think i typed in same space fonts google fonts and then it clicked for me that's yeah that's what monospace is and you go into google and you know they got space mono or like you can just search for mono mono space fonts and they have a whole bunch here and i found this font called oh they have sign mono um yeah they just have a bunch here i found this font called major mono display it's almost a bit like an alien font like the h is weird and it's just a really interesting font um you know and it's mono space so all the space all the uh letters are the same space are the same width so when i do the rotation it's perfect so in this case i think they use the mono space too because all of the uh the width of the letters are the same width um pavish asked could you please tell how to change the color of slider dot please yes pavish um i can do that uh we'll do that after i cover this menu here okay i just wanted to kind of give that quick intro there but let's go ahead and jump into building the actual menu so i'm going to delete everything i have on the site i'm going to clean up all the classes and again if you're new to webflow i do cover some pretty advanced topics here but feel free to stop me as i'm explaining and be like hey i don't understand what you're doing can you explain that or you know if you have any you know questions pertaining to webflow at all or like uh simpler questions or questions around getting started just just feel free to type it in chat and i can definitely help out with that um so yeah let's go ahead and get started um as you all know i like to start all my sites with a section um so we'll add a section and we'll just call it hero dash section this will be the hero section or you know what i'm not building a full site so we're just going to call it section right now we'll set the mid height to 100 vh have a full viewport section and then here uh we'll set it to flex center center and i'm not going to style the the open the the open button i'm just going to create a circle for the open button uh just to save a little bit of time we can see here on this site they have like this really interesting x and maybe we'll do that tomorrow maybe we'll create that menu button uh tomorrow but for now we just want to create the menu opening and that whole effect so i'll add a div block and we'll call this menu button open and we'll set the width to 50 by 50. we'll give it a background color of almost black and we'll set the border radius to 50 we might work the work with gradients too to like really get out there with the colors but right now we'll just leave it at kind of black and white really simple colors so we can focus more on the technical aspect of this build okay so in the section what i want to do now is add the menu so i'll add a div block and i'll say menu dash wrapper and we'll set it to a position of fixed and full okay so the menu is in the section and actually yeah i want i want the menu in this section i think if not we can take the menu out of the section but for now we'll just put it in the section and boom we have the menu wrapper it's set to fixed and awesome i'm thinking we're going to add it to the body but let's just focus on on this right now so we have the menu wrapper and then if we look at this menu when it opens it has three different blocks coming in so for that let's see yeah for that i'm going to add another div block so i'll add a div and i'll set it to uh i'll call this menu bars wrapper i'll set it to a position of absolute and full and then and here is where i'm going to add those bars so the reason i'm adding it in another div is because we're gonna have another wrapper with the menu items inside of it so we're having full like each layer of the menu is gonna be is going to fill the entire width and height or fill the entire viewport essentially so we have the menu wrapper then we have a layer of the blocks that are going to be on its uh inside its own div and then we're going to have another layer of menu items that's going to be inside its own div so we can stack those and have some z index to them hopefully that made sense uh hey amkar hello okay so we have the menu menu bars wrapper i'm going to set it to flex vertical align uh horizontal yeah align uh or the direction is going to be vertical then i want to align stretch horizontally and justify from the top so now i can add a div block and i'll call this menu bar for example and then for the sizing i'm going to say grow if possible so this menu bar will fill the available space now all i need to do is copy and paste three times and we have three equal bars or three equal rows i should say okay and so now we'll go into the background and i'll say one eight one eight one eight and we have those bars right so all i have to do at this point and we'll go ahead and animate it so we'll do it step by step uh so i'll go into uh i'll select the menu button open or let's see yeah okay so yeah let me put the menu wrapper outside here and no let's put it let's leave it in the section for now okay so we have the menu wrapper and the menu button open so what we can do we can go into the interaction so we'll create that interaction i'll click the plus and i'll say on mouse click of the menu button open we're going to start an animation we're going to start a new time to animation and we're going to say menu open okay so it's going to be the opening of the menu all right so then we're going to select the menu wrapper we're going to say give it an action we're gonna say hide show so initially we want it to be hidden so we don't see it and then we're going to show it right away so we'll set it back to flex or no this is just display block yeah and then we're going to move each of these bars individually so i'll select this first bar i'll move it 100 to the right so on the x-axis i'll say 100 percent and we'll just do the selected element we don't want all the bars to move at the same time because we're going to give them a delay one after another i'll select the second one i'll say move just this selected element move it 100 percent and we want this to be the initial state so set as initial state set as initial state and then this one we're going to move it 100 and just the selected element and then set as the initial state so initially we don't see the menu and we don't see those bars the bars are off canvas so now we want to bring those bars in one by one so this first bar which i i believe is at the bottom after we show the menu so it's gonna initially the menu is hidden the entire menu wrapper is hidden then the menu wrapper shows so the user can interact with the elements inside the menu and then we're going to move each individual block from right to left so right now they're all the way to the right so we're going to move this first one we're gonna move it back to zero percent and let's uh 0.5 is fine for the duration uh let's say it has a really slick easing so we'll do ease and out or ease out let's try quart ease out court i'll select the second one we'll move it to zero percent on the x again ease out quartz and we'll start them together and then the first one will move to zero percent start it with the other ones i'll say ease out quart now all i have to do is add a delay to the second and third one so this one will have a delay of 0.2 they're pretty quick so i'm going to add a delay of 0.1 and this is going to be a delay of 0.2 that's kind of fast i'm gonna select all of them i'm gonna say one second yeah that's much better so i click nothing happens let me save okay so let's see here uh menu wrapper so menu open menu wrapper hide show should not be visible initially then it we show it and then we should have that effect occur hello mhd welcome okay menu button menu wrapper it's in the section i love it when things work let's see relative maybe i have to set it to relative or maybe menu wrapper set it to hidden okay um yeah that's interesting okay so i had to set this menu wrapper to hidden in order to click on it but i thought i did that in the interaction so let me see oh i didn't set it as the initial state got it so the menu wrapper has to be set as the initial state so now i should be able to bring it back and we shouldn't have any issue perfect all right so we have the first part of the menu done looks pretty good it's still a little bit smoother i mean oh that's pretty good no i like it so then we have to work on the menu close so for that um we'll go into the menu wrapper i'll add a div let me set the menu wrapper to okay it's fixed we'll add a div block and i'll say close button we'll position it absolute in the upper right and we'll say thank you appreciate it yeah awesome yeah that's why i do i just you know want to help users with webflow um you know i know web design and development isn't always like the easiest concepts to grasp and we try to make it easier with no code but we still have to maybe understand a few other concepts in there but appreciate the kind words mhd definitely enjoy doing these live streams cool so there's going to be our close button and yeah if you have any questions or any super chats like feel free to post we have some regulars in here so if you want to hop in you know more often or every monday through thursday we definitely have a good time here so all right cool so we have that then we have the uh the close button so now um we can create the menu item so we see we have this effect here so let's go ahead and create that so within the menu bars wrapper or the menu wrapper i'm going to add another div and i'm going to set this to a position of absolute and full because the menu wrapper is already fixed so we don't need to use that fixed setting anymore we can just use absolute and it'll be it'll fill that fixed parent element [Music] it thank you thank you um yeah thank you muhammad thank you maverick oh yeah uh yeah definitely uh that's the funny thing the more you use webflow the more you actually understand css that's definitely i found that same kind of correlation as well or that same connection um so this is going to be menu items wrapper okay so we're going to put our menu items in here so position absolute perfect and then i'm going to set this to flex vertical no wait yeah okay let me take a look here uh [Music] yeah we'll do that for now so flex vertical align start we're gonna align it to the to the left because these menu items are on the left and we'll justify top or let's do center so we'll the menu items will be in the center the so on the left and in the center okay so let's go ahead and start adding our menu items so i'll add a div block and i'll call this menu item wrapper okay so we have this div block here and home project okay and now we'll add our text so let's see yeah okay so we have to add each letter one by one okay so we'll add a text block yeah we might have to add some more divs some more parent elements but we'll get to that in a second so we'll call this menu dash letter okay and we'll say h for home and let's go ahead and change the color and the font so for the font again i'm using major mono space i think major mono display and the font will be white and it's going to be a really large font size maybe 120 yeah 120 works i'll do one dash for the line height so unitless okay then i'll paste this so in the menu item wrapper so singular because it's the item wrapper we're going to set it to flex horizontal align stretch and justify start so i can paste that h four times and just type in uh home okay great um and then for the menu items wrapper so the entire wrapper i can add some padding of 60 something like this and then we'll copy each menu item wrapper so copy and paste so we have four home projects about contact so home oh yeah so this font is interesting because if you use capital if i use capital r it's different which i might do because it's just interesting uh projects so we'll use one weird alien letter paste i think that's too many projects i know it's perfect let's see what the t looks like nope almost the s nope projects and about the a is cool yeah i like that a about what's the u look like what's the y nope it's a very interesting font about and contact what's the c nope c o n t we'll use this a now let's use a regular a we need one of them each okay so we have one alien letter in each so here's the h the p and the a's are kind of weird okay so menu item wrapper let's add some margin maybe 20 pixels all right so if i preview and i open we have our menu items uh one thing i didn't do obviously you want to set the menu item wrapper to a link block so this is always fun trying to convert it because you have to select it properly so what i might do is just add some margin there so i can select it convert to link block convert to link block and uh yeah i could manuel um but i need to apply the um 3d rotation to all the letters so i need to i need them to be individual so that's why um each letter is separate so yeah we have a menu item wrapper let me remove the underline and okay underline is removed okay great and we'll remove the margin here okay so here i'll showcase this so we have we've selected a menu letter and actually what i want to do is go into the menu item wrapper so the parent element and i want to give it some child perspective so when you're working with 3d you want to give the parent element some child perspective so you have some 3d space um so here i'll click the three dots and for the children perspective i'll say something like a thousand so that gives us plenty of space to move those letters inside of this 3d space so now i can select the menu letter and i can say 3d transforms and i can set the transform origin to the right so i'll set it to the right and then i'll add a transform i'll say rotate and rotate it on the y-axis so we get that really cool effect nice but instead of applying it here we're going to do it with the interaction so let's go ahead and do that now so i'll select the menu item wrapper go into interactions and click the plus then i'll say on mouse hover we're going to start an animation and i'm going to say menu letter hover uh hover in okay and when we hover over it we're going to select the menu letter and we're going to rotate it um yeah only children with this class that's fine menu letter because we want to rotate all of them and we're going to rotate it on the y axis we're going to rotate it 180 degrees and for the duration we'll say 0.5 and let's do an easing of ease out court to match just the easing of the site so let's see how this looks and perfect and let's see if we get yep that's exactly what i wanted and we'll apply it to um to class so any so we'll apply it to all the menu item wrappers so it'll apply to these and the so here under trigger settings we'll say class and we'll say menu item wrapper so now if i open it and i hover it does it to all of them nice so now we just need to do the hover out animation so starting in an animation i'll duplicate the menu letter hover in select it so it's menu letter hovering 2 and i'll just say menu letter hover out and all we have to do is set the rotation to zero so now we'll preview open and we can see we have that interesting effect to all the letters okay um yeah so the last thing we need to do is when the menu opens so let me go back into styles i'm going to for the menu wrapper i'm going to hide it and we'll select the menu button open let's go into that interaction so on menu menu open yeah the menu appears but i also want the menu items wrapper i'm sure i could probably could have probably probably named these a bit better we have the menu items wrapper which is the menu the the link blocks we want to set the opacity to zero percent initially so we don't see them so um yeah wait yeah zero percent and we'll set it as the initial state and then we'll say opacity 0.5 is fine we'll just say ease and we'll set it to 100 um and we'll start it with here with the menu hide show okay so yeah i think that should do it so i'd start it yeah that's that's better actually either way would work let's see how they did it here uh interesting i'll have to look into that manoa oh okay so forget that opacity thing i just added we're going to yeah this is going to be cool um let me delete the opacity let's go back into the menu wrapper okay let's go back into this effect and yeah let me look at this yeah i think the the letters can be different widths but when you type it out they all have the same width i'd have to research that but it definitely works because the spacing is still the same when you invert it so it it does work somehow anyways we probably have to like i don't know measure individually just to see if it's perfect but one thing i wanted to do is yeah make the text appear from the bottom to the top so we open it the text appears okay got it so this is where menu item wrapper yeah this is where i want to um yeah add things in another div block so we'll say div and we'll say [Music] there's a menu item wrapper we'll call this i would just call it menu item mask how's that menu item mask we'll put this in here and we'll add a few other ones so you'll see in a sec why i'm adding a mask okay menu item mask okay and we'll add another div block and we'll say menu item mask okay we'll put this up here put this in here and one more div menu item mask okay so i think we got it menu item mask okay so for this menu item mask i'm gonna set the overflow to hidden and what this will allow us to do is i can then select the menu item wrapper and i can move it up and down so i can move it like this right and we can see the the menu items come in all right so that's why before i was saying i knew i had to wrap some elements a bit more because we had some more effects going alright so we have the menu item mask and what we want to do is um for the menu let's go to the menu button open go to the interaction menu open click here and then we want to select let's see how they do it here so there's a delay one okay so there's a delay to it so we'll select the first menu item mask or menu item wrapper excuse me and we have to move them all down so i'll say 100 percent set as initial state and we want to say selected element because we're going to stagger them i'm hoping webflow comes out with a stagger feature sometime soon because i know a lot of these scripts these animation scripts have a cool stagger shortcut or like function that you can easily apply and that's one thing i'm hoping webflow updates in their interactions where i can have the same elements but just apply a stagger effect to them the way we have to do it now we have to go into each element individually and up and apply a delay so i'm hoping at some point webflow adds a stagger kind of option for interactions um okay so i'll select this menu item mask and i'll say move down a hundred percent set it as the initial state and just the selected element oh no not the menu item mask the menu item wrapper in the mask will move it down 100 set it as the initial state just the selected element then the menu item wrapper will move it down a hundred percent um and then we'll say selected yeah selected element set as an initial state and the last one we will move it 100 the selected element and set as initial state okay so all the menu items start at the bottom and okay so now we have to go in and bring them back in so we'll say move back to zero percent for the first one i'll just duplicate this four times and change the target so right click change target select the second one just selected element right click change target select the third one adjust the selected element right click not delete right click change target and the fourth one and just the selected element okay so i'll start it with the bars moving so let's take a quick look and see how that looks okay so we see we need to okay and we need to do something else in a second too all right so i want to i wanted to start after the bars come in so i'm going to do let's take a quick look here so the bars come in and then okay so i actually yeah i can start this after so let me see if i can just grab these and do something like this no um after previous okay so after the bars come in we're going to start this animation and we're just going to add a delay to each one so this is going to be zero yeah zero that'll be point two and this will be point four and this will be point six i'll select all of them we'll say ease out quart keep it consistent okay so 0.2 is too much delay so let's do 0.1 so 0.1 point two and point three okay that's not bad i might change the easing a little bit maybe he's i just ease yeah i don't mind that all right so now the last thing we know is that we're missing that letter on the end so we actually have to apply let me save this and we actually have to apply some padding to the right side here so i'm just going to say 100 so we don't um miss the last letter excuse me um yeah so that is our menu this could be a really out there type of menu you know for a cool movie or something the movie that comes to mind when i think of these letters is that movie where the there was aliens that came from outer space um and they were speaking a different language and like almost hieroglyphs oh what's the name i almost had it the it was the guy from uh he was in the avengers he played hawkeye and the woman from amy adams is her name what's the name of that movie somebody somebody must know it here um that was really cool movie uh yeah so the last thing i want to do is take this close button i want to change the in z index is something really high so we have access to it and we're just going to reverse the entire menu okay so let's see here so the close button when we close it arrival yes thank you eric appreciate it um so mouse click on first click we'll start an animation we'll duplicate the menu open yeah it was a great movie i really liked it menu close oh dune was dope dune was such a good movie yeah i just recently saw that actually just i subscribed to hbo max for like a month just to watch dune because i don't watch anything else on hbo max but i didn't want to go to the theater to watch it yep that's it richard arrival yep i didn't want to go to the theater so i just got hbo max for like a month because hbo was showing it in their subscription um cool so yeah let's just close the menu on when we click on the close button so let's see i'm actually yeah let's delete all the initial states yeah definitely and i'll put this at the bottom here so for the menu bars or we're gonna we're going to hide the menu items first so we'll start with four and the delay will be zero and then three the delay will be 0.1 then uh 2 the delay will be 0.2 so we're just reversing everything and then 1 the delay will be 0.3 okay so we just reversed it and for all of these we're going to set it back up back down to negative 100 so it goes back down then the menu bar is the same thing we want to reverse it um yeah oh no not negative 100 100 to move it down okay then the menu bars we're gonna start let's see how they reversed it here they start with the bottom okay so the bottom goes first which is what we want so we're gonna do a hundred percent yeah and just do 100 for all of them and i think that should work 100 and then the last thing we're going to do is hide the menu so here for hide show to set it to hidden i think that's it so we open the menu we close the menu boom awesome easy peasy lemon squeezy i don't know i don't know where that came from all right so let me close my calendar here um so now we can just link out the menu items to anything so i'm just going to link them all out to webdev for you to plug my site obviously just kidding i'm not all about promotion or anything like that but do look out for my new template coming out soon hopefully it's in it comes out today um all right cool so i'll go ahead and publish because that's basically it and i'll preview so we click the menu button it opens we have this weird line i don't know what that's about that's weird never seen that before okay so now i can't close the menu why is that so close button or reopen it i need to be able to reopen it oh wait no that should work so hide menu wrapper set to hidden menu button menu bars okay menu item wrapper that's fine we reset it so what menu bar one second that's fine maybe i have to hide the menu let's try that so menu hidden open perfect close it okay give me one second comes in we close it okay so i don't have access to this right now why is that so the menu wrapper we must have not accessed the menu wrapper correctly so the close button menu close menu wrapper unless you do selected element maybe we set it to hidden yeah save and after it closes it should be hidden but it's not oh that's fun uh menu wrapper okay let's bring that back in let me change the cursor to pointer okay so menu wrapper so when we close it when we click everything moves and then the menu wrapper is set to not visible to hide the elements yeah hmm if anybody catches what i'm missing let me know because i should have access to the button because what we do is we hide the entire menu wrapper when we close the menu so in the menu bars wrapper let me publish it hold on preview open the menu that's all good we got to work on that line i do not know what that's about okay i'll close the menu menu items wrapper position absolute so this should be menu bars wrapper display block this is set to menu wrapper so this should be display none now which it didn't happen so display none okay so it's not setting it to display none and setting it to display block is it not as indexing hidden menudiv is over it may be um possibly but i'm getting some weird like it's it's still set to display block here and it should be none because that's what i set it to in the interaction so let's go back and see if i'm missing something menu close i'm going to delete this and try again so select the menu wrapper hide show display none save oh now it worked yeah that was a bit glitchy from yeah i don't know why it did that yeah it it was i don't know maybe because i was applying it to the selected element but it works fine now yep perfect except for that line there we're going to fix that um let me see if i can reproduce it because if not there might be a little glitch so menu button close and i think before i had it set to just selected element maybe that could be why no it works fine now just a little hiccup i just had to retarget it i guess all right cool uh so yeah i think that's it um trying to think oh yeah that's weird space so what i can try to do is for the menu bars is maybe try a hundred percent just giving it a value of a hundred percent see if that helps we're trying to get rid of that weird line in the middle nope still there uh let's see menu bar see if i can recreate it no hmm strange so let's see let's try for the menu bars rapper hey tommy what's up um how's it going yeah we're just creating a menu here menu bars wrapper let's try to set give this a height 100 percent it might need an explicit height set them a ah eric genius gene that's brilliant yep so let's preview that no okay so we'll go with eric's uh idea so let me remove that's a genius idea i'm gonna remove all this uh and i set the width to 100 should have been the height um yeah oh i can't set the height because we have it to grow if possible um so eric says set the menu bars wrapper to or let's see would that work let me see menu bars wrapper to that same black open yeah that's that's the only thing um it does that so we can't do that or apply the the color there um hmm alignment order yeah i don't know maybe it's a browser thing let me open safari and see how it looks in safari yeah safari doesn't have that that um that issue wow that is a nice menu i like it i like it a lot and we could use um howler.js to add sound effects that would be super dope i have these cool sound effects like when you hover you can make like weird sounds that would be so awesome maybe we'll do that tomorrow who wants to learn how to add sound effects to a website that'd be super super cool all right nice bar is 100 vh divided by three and menu wrapper 100 vh let's do it let's do it muhammad um so menu items wrapper let's see menu bars wrapper 100 vh menu bar will remove this sizing we'll say 100 vh 100 divided by 3 vh [Music] all right let's see let's see how we did no still that line there that's super weird and then i do that and it goes away chrome what are you doing [Music] you know what i no well yeah i guess this would work menu bar will add a border same color [Music] and make the border like two kind of a weird thing but let's try it what is happening let's try five i have a feeling it's something else besides because it'll still add that border it's adding that spacing yeah it's so weird what is that line doing there okay remove the border i guess we'll just add a negative margin let's try that negative four and if we have space at the bottom we'll fix that chrome what are you doing yeah this was a fun one i know someone mentioned that uh i should edit my videos to make them shorter and i'm thinking of like afterwards yeah that worked adding a negative margin that worked so let me make it negative two instead of negative let's try negative two see if that works yeah so uh someone mentioned because the videos are pretty long like the live streams so one idea i had was like redoing this entire thing after the live stream but i don't know if i have time for that all right yeah adding a bit of negative margin helped maybe it has something to do with the min height maybe it would need an explicit yeah that i found that weird too eric i i don't know let's try a few things i'm just going to try to narrow it down to see what it is so i'm going to remove this margin and for the menu wrapper oh no i have it set to fixed uh yeah it's fixed so i don't know why i would do that maybe for the section yeah let's let's try to set an explicit height to the section and the last no i do want the menu in the section nope don't know what that's about let's try moving it out of this section i'll put the section on top nope the section would need to be like this wait i don't know no this isn't going to work yeah the menu needs to be in the section well okay we'll just do that negative margin thing and uh yeah no that's not gonna work uh let me undo all of that there we go menu wrapper section i'm in height 100 vh and menu bar yeah we'll just let's try negative one see if that if just negative one works uh maybe just add some stamps yeah that's a good idea richard yeah negative one works for margin okay now i'm just curious what if we were moving now does it work i it just has one pixel yeah i can do that add some time stamps nope so yeah we just add negative one margin to the menu bar and we're good to go alright so that concludes this menu um we have three minutes left if anyone has any questions i'll stay on a bit longer for super chats if anybody has a super chat but yeah this was a really fun menu we could add the arrow too that comes in so this was inspired off this site and you know where the arrows come in and they have this number changing here which is cool too probably won't get into that but i think that's more of a script there um we might be able to do it with interactions but it's a little i think would be pretty involved but yeah we could add an arrow that comes in and pushes like has that cool effect i think that arrow does add a lot of dimension and more effect to it because like pushing the text and flipping it over so if i had an arrow i would definitely add it it'd be really simple you would just put it before the the text and then just position it outside of the wrapper and have it come in so if you want to see that i can cover that tomorrow um what else did i say i wanted to cover oh yeah maybe sound effects we'll see if we add sound effects what if it was set to zero yeah we'll see [Music] sorry for the yeah background noises i mean can't really do much about that but uh i i left my windows open a little bit because it's pretty warm um yeah still even if i set it to zero still does it uh eric uh yeah so negative one that'll that'll do it can you make a listing website tutorial please the number changing i think is a position absolute bottom right lotty animation in loop absolute bottom right uh yeah i i thought it might be something like that maverick but when i was observing it and kind of like trying to understand it the thing is like if you hover over home and then you hover over about like you see it goes from one to three like it's not sequential which is interesting i think you'd have to you need a more complex script to do that right i can go from one to four and it just goes to four like you don't see two and three when i go to four you just see one to four uh so to me that's more more of a complex uh script than just a sequential uh script there and i can't tell from looking at the code what it would be excuse me yeah so hopefully that was enjoyable i mean that was fun i mean i had a lot of fun building this um i will make this cloneable uh so you guys can just clone it maybe let's let's uh embellish it a bit more before i make it cloneable and let's try adding sound effects to really give it this weird effect and we'll find this really cool picture on unsplash of like some abstract art to go with this menu and create this really interesting vibe for the menu i think it could be really cool we'll use a howler.js and i've i've got some interesting sound effects so howler.js allows you to add sound effects when you hover over things so it's really fun uh cool so that concludes today's live stream thanks everyone for joining um yeah thanks maverick thanks joey joe uh can you make a listing website tutorial please joey joe can you provide an example of that i could definitely look into that thanks eric richard mohammed aj tommy i think i said richard manuel thank you wkd um yeah mhd omkar dylan joey joe i think i mentioned yeah great to have all of you here um fun building and webflow and yeah i really love interactions um you know i have enjoyed building layouts but interactions to me are just so fun and cool and to be able to make things animate i just i really like animation so definitely had a lot of fun today if you liked this live stream feel free to subscribe and yeah i do these every monday through thursday from 12 p.m to 1 p.m central and yeah so that's it for today's live stream thanks for watching and i'll see you tomorrow thank you peace

Channel: WebDev For You

Views: 408

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design, webflow interactions, interactions, webflow animated menu, animated menu, menu animation

Id: nKd1Ot7arKc

Length: 62min 30sec (3750 seconds)

Published: Mon Nov 08 2021