Daily Interaction #35 | Fullscreen Menu with Text Animation | WebDev For You | Made in Webflow

all right so today is kind of a short one so here goes I'm glad you've arrived now let's build daily interaction number 35 hey what's up everyone john with web dev for you and welcome to the daily interaction series where every weekday we build a new interaction or animation in web flow i'm really excited to go over today's daily interaction we're gonna build a full-screen menu with a text animation when we open the menu so here i have the demo and when i click on the menu trigger we see the menu comes in it comes in from the bottom to the top and the menu items also come in from the bottom to the top so yeah i just like kind of the animation of it to really smooth the animation and i think it can make for a really nice menu for your website here i'm using kind of a chapter theme of like a book but you can replace this with any menu items and link out the different pages on your website alright and I'll close it here and I'll close all the menu items go down and the menu closes so again I open all the menu items come up in the menu and I close and everything goes down yeah so I just like the timing it feels really smooth so yeah I'm excited to showcase how to create this in web flow all right yeah so this is what we will be building today to view more daily in our daily interactions and premium content visit web dev for ucomm also be sure to subscribe below to receive a notification every time there is a new daily interaction ok so here I have a blank web flow project so first we're gonna build out the menu the menu trigger and the add the menu items and then we'll add the interaction so here the first thing I'll do we're going to be using the daily interaction class naming convention so it's d - the daily interaction number so today is 35 and then the element so every element on the site will have a D - 35 in front of it this is for consistency purposes and so that we know we're working with daily interaction number 35 okay so the first thing I'll do is I'll add a section so I'll add an element I'll add a section and I'll give it the class name the - 35 section and then for the height I'll set it to 100 VH viewport height so it spans the full height of the viewport and it will be the full width as well and then for this I'm going to give it a background because the background of the menu is going to be white so I want to set the background of the section to something darker so we have a bit of contrast so here for the color I'm going to say something close to black so I'll do hashtag 1 1 1 4 kind of like a really dark color here okay and then for the display setting for the section I'm gonna say flex I'm gonna say horizontal justify start so it starts on the left and a line Center so the reason I'm doing this is because we're gonna have the menu trigger to the left and the bottom or the left in the center of the section okay so the next thing I want to do is add the menu trigger inside of the section we could because we need a trigger to open the menu okay so here I'll add an element I'll add a div block and notice it's on the left and in the center and that's because we assign that flux setting to the section and I'll give it the class name D - 35 menu trigger ok and for this I'll give it a width and height of 50 pixels by 50 pixels you can use anything you'd like for the menu trigger but just to save a bit of time I'm just going to make it a circle but at webdev for ucomm I do have other menu triggers that you could use as well for this interaction so yeah 50 pixels by 50 pixels the background I'll make it this kind of light pink color so we can clearly see it within the black background and I'll set the border radius to 50% to make it a perfect circle so half the size of the square makes it a perfect circle okay and then I'll add some margin from the left let's say like 40 pixels so it's not flush to the left side of the browser and there we go so we have the menu trigger this is what we're going to use to open the menu so when we create the interaction we're going to use this menu triggers when we click on it it opens the menu and when we click again it'll close the menu okay so the next thing we want to do is add the menu wrapper or the menu so to do this I'm going to click on the navigator and I'm going to select the body we're going to add the menu to the body so I'll select the body here and I'll add an element I'll add a div block and I'll give it the class name D - 35 menu menu wrapper okay and for this I'm gonna set it to a position of fixed and apps no fixed and full so it fills the entire browser so no matter where the user is on the site the menu will open so it'll always be fixed within the browser okay and for this I'm going to give it a background color of white so I'll set it to white and there we have the menu wrapper so you might notice that the menu trigger is no longer visible and we actually need it to be visible because when you open and close the menu you yeah when you open the menu you still need the mat you still need to see the menu trigger to close it so we want to bring that menu trigger to the front so to do that we'll go to the Navigator we'll go into the section select the menu trigger and go back into styles and for the position I'll set it to relative okay and by setting it to relative we can now play with these deep the z-index value which allows us to bring elements yeah which allows us to change the layer property of the element so we can bring it yeah further in front of other elements so I set it to relative and right down here we have Z and X so here I'll set it to something greater than zero so I'll do something really high like 99 and perfect now we see the menu trigger it's placed in front of all the other elements all right looks good so let's continue building out the the menu so for the menu wrapper I'm yeah I'll select it here in the navigator and I'll give it a display setting of flux justify:center and a line center because we're gonna have the menu items in the center the next thing I'll do is add the menu item wrapper so here I'll add an element I'll add a div block and notice it's in the center and I'll give it the class name D - 35 menu item wrapper so here what I want to do is go to element settings and for the tag I'm going to change it to a nav so this defines a set of navigation links such as those in your main site nav so I want ya because we are gonna have link blocks inside of this menu item wrapper I want it to be kind of known as the nav for the site so that search engines and the structure of the site knows that this is the menu for the website so we want to place it yeah have the div tags be a nav tag okay and then in the Styles I'm going to give it a display setting of flux I'm gonna say vertical and I'm gonna say justify space around so the menu items have equal spacing between them and I'm gonna say a line stretch yeah line stretch is OK here okay so that's all we need to do for the menu item wrapper set it to a nav and add a flux box a vertical flexbox layout okay so the next thing i'll do is add the link blocks so yeah i'll had an element I'll add a link block for the menu item and we're adding a link box so we can link out to a URL page page section email telephone number or a file so yeah the text for the menu item menu items will go inside of this lunch block so here I'll give it the class name D - 35 menu item and for this I'll give it a display setting of flux set it to vertical and here I'll say justify:center and a line Center so the reason we're adding this to the to the link block is because we're going to have two text we're going to have a small text and a large text so if we go to the demo right in here and I open the menu we see we have yeah the smaller text and then the the larger text here yeah so we want those to be stacked on top of each other so that's why we set it to 2 vertical okay yeah it's play setting of vertical justify center and align Center all right so now let's add the small text first to the yeah to the link block so here with the link block selected I'll add an element and I'll add a text block so we notice it has kind of this blue color and an underline and that's because the text is inside of a link block so web flow is giving it the hyperlink styling so to remove that will go into the navigator and I'll select the text block so here we have the structure of the site so we have the menu item wrapper the menu item which is the link block and then inside the link block is the text block so to remove the underline I'll select the link block or the menu item I'll go into styles and for the underlined under typography I'll say none okay so that removes the underline and then I'll select the text block and I'll give it the class name D - 35 menu item text small okay and I'll go to typography for this I want to use the font called Laura we don't have it here so we need to install it so to install the font from google fonts and web flow you just go to the left here with the w is click yes let it select project settings and then I'll go to fonts and here I can select a Google so I'll just select from the drop-down and I'll scroll to Laura so yeah so right here there we go Laura and I just need the regular but I'll install the 700 font weight as well just in case and I'll add font and there we go so now we can use Laura in this project so I'll select the text I'll go ahead and double click and rename this to chop their chapter 1 and let's go ahead and change the type I'll say Laura we have it here for the color I'll say black and give it kind of an opacity of 80% so it's a bit lighter and the font size of 14 pixels is okay and the line height of 20 is okay all right so now I want to add the larger text so I'll go into the Navigator I'll select the menu item so we can add it into the menu item I'll add an element add a text block get right up here and I'll style this as well I'll give it the class name D - 35 menu item text large okay and I'll rename this to the beginning and we'll give it the font type Laura and for this we'll set it to black for the color and the size for the text I'll set it to 34 and the line height I'll set it to 50 okay and I'll give it some letter spacing so I'll say 2 pixels for the letter spacing so now when I preview we have the text there so yeah there's our menu item the both of these texts are in the link block and the link block has the class D - 35 menu item so now I want to copy this five times so I'll go into the navigator and I'll select the menu item I'll hit command C to copy I'll select the menu item wrapper and then I'll paste for more time so we have five menu items and then I'll double click inside of each one so we have the beginning with not with three ends the beginning the journey and yeah antagonist resolution and and okay and then we have chapter two chapter three chapter four and Chapter five okay so again you can replace this with the pages on your site I'm just using like a book theme just for just to change it up a bit and kind of yeah for demonstration purposes alright so the next thing I want to do let me collapse everything I'll select the menu item so we can add a bit of margin between these menu items so I'll select the menu item and here for the top margin I'll add a top margin of about 30 pixels okay so looks good this is how our menu will look once we've added all the interactions so yeah I like how that looks I'll also add a hover animation so I'll select the menu item text large then I'll go to States I'll select the hover State and I'll go down to typography and for the color I'll change it to blue on hover so when we hover over the large text it turns blue and I'll add a transition so for the state's I'll go back to none because we want to add the transition to the none state and I'll go down to transitions and transforms I'll add a transition and for the property I'll change it to let's see font color because we're going to change the font color and I'll give it a duration of how 500 milliseconds and then easing of ease is okay you can choose different easels here but I like easing it's nice and smooth smooth and I'll preview and when I hover we have the text turn blue on hover okay so we have everything we need to create the interaction so let's go ahead and jump right in so to create the interaction I want to select the the menu trigger which is in this section so here in the section I'll select the menu trigger which is right here because we want the interaction to occur when we click on it so I have it selected then I'll go into interactions here where it says element trigger I'll click the plus and also like the mouse click or tap so this is going to occur when we click or tap on it so I'll select it here and on first click we're going to start in animation and we're going to add a new time to animation so I'll click the plus and I'll name this D - 35 first click ok so if we go to the demo and let's just preview it really quick so I click the menu comes in it doesn't start all the way at the bottom it starts at about 30% so we want the menu to yeah we want to set the initial States for the menu so we wanted to start lower and not be visible and then the menu items we also want them to start lower and not be visible so that we can have that moving up animation so the first thing we need to do for all the elements is add initial States to them so here for the menu wrapper so I'll go into the Navigator select the menu wrapper go back into the interaction and I'll add a new time to action so I'll click the plus select move and let me just add a bit more real estate here to the screen yet so we'll say move and on the Y we're gonna move it down vertically 30% so yeah we want to move it on the y-axis so I'm going to move it down 30% so it starts lower and I also want to set the opacity so we can have it fade in as it moves up so I'll add an animation I'll say opacity and I'll set it to 0% so we don't see it and also set it as the initial state yeah for yet for both the menu wrapper right next to timing make sure you select set as initial state and for the opacity set as initial state so when we preview let's see if I get here yeah if we preview we don't see anything for now I'm going to set it to 100 percent for the opacity so we can work with the other elements as well and see kind of how they're moving but once I'm done setting all the initial states I'm gonna set this opacity back to zero all right so let's move all the menu items down as well so in the Navigator I'll open up the the menu wrapper then the menu item wrapper and select the first menu item then I'll say move we're gonna move these down 60% on the Y 60% and set it as the initial state and also the opacity we're gonna set it to zero percent so it moves and fades in as well as it's coming in and set as initial State okay so I'll do this a few more time select the second menu item and say move move down 60% and set it as the initial State and set the opacity to zero and set as the initial State so what I can do here now I can just right click duplicate the movement right click change target and select the third menu item then the opacity right click duplicate right-click change target select the third menu item and I'll just click hold and drag so that they become initial States as well I'll just drag a dragon on top of these ones and they become initial States so again I can right click duplicate right-click change target select the fourth menu item then the opacity right click duplicate right-click change target select the fourth and just move it up and right click duplicate the movement right click change target select the fifth menu item then the opacity right click duplicate right-click change target and select D fifth menu item all right so all of them initially all the menu items start 60% down and within an opacity of zero the reason we're doing it individually is because we're gonna have a staggered motion to each of them so we need to add we need to have them come in individually so we can add a delay okay so I'll go ahead and set the opacity for the menu wrapper back to 0% so we don't see it and the last thing we need to do is hide the menu completely so just because we can't see it doesn't mean it's not there so if we don't hide the menu we wouldn't be able to interact with elements behind it because it is still a div block and it's in front of other elements so it's actually blocking other elements so the last thing we need to do is hide the menu completely so it doesn't interfere with the website behind it and then the first thing we'll do is show the menu and and then apply all the other interactions so here I'll add a new time to action or yeah I'll select the the menu wrapper and add a new time to action and I'll say hi to show under miscellaneous and for the display I'll say display none so it's almost as if it's not there okay and I'll click hold and drag and start it with the other ones so all of these are timed actions that are set as the initial state so if I preview it's almost as if there's no menu on the site okay so the next thing we're going to do is yeah the first thing we're gonna do we're going to bring back all of those elements that we hid and set an opacity to zero so the first thing we need to do is make sure that that menu comes back in so we'll add a time to action and I'll say hi to show and I'll set the display to flux because that's the property we assigned to it and we were first building it okay then I want the menu wrapper for for this we don't need any timing it'll just show yeah and then we want to bring the menu wrapper we want to have it move back to zero percent and an opacity of a hundred percent so because it's here in the timed action I can select it then I'll say move and we'll move it on the Y back to zero percent for this for the easing I'm gonna say ease and out and a duration of 0.5 you can work with the easing and set any easing you'd like but after playing around with this menu quite a bit I kind of found found particular easing z' that I liked so for the menu menu wrapper when it comes back in will set the easing to ease in and out and a value of zero percent and yeah in the opacity everyone's want to select opacity another time to action and will set it to 100% and will set it to ease and out and start it with the movement so I'll click hold and drag so they start together it's not a preview and when I click the menu trigger that menu comes in from 30% down and back to up to 0% and it fades in okay so I see that one more time I click it comes in it looks good so the next thing I want to do is bring in all the menu items as well so here in the in the timed action I'll select the first menu item so I know it's in a sequence so we have one through five so I'll select it here or I can select it in the Navigator menu item and here I'll say move and I'll move it back to 0% and for the menu items the movement has an easing of ease out expo they have here ease out expo and a duration of two seconds so it's going to move in pretty slow and then we're going to set an opacity we're gonna have it fade in as well and this is going to have ya the opacity is set to 100% and it's going to have a duration of one second and the easing for the opacity is ease okay and I'll click hold and drag to start it with the movement of the menu item so if I preview and I click that menu item comes in nice and slow and looks good so I just want to apply this to all the menu items so again like we did for the initial States I'm going to right click duplicate right-click change target select the second menu item and for the opacity right click duplicate right-click change target and select the second menu item and just make sure they start with the other ones then right click duplicate for the movement right click change target select the third menu item opacity right click duplicate right click change target select the third and we'll start them up here and right click duplicate right click change target select the fourth for the movement opacity right click duplicate right click change target and select the 4th and click hold and drag start them with the other ones movement right click duplicate right click change target select the 5th one and then the opacity right click duplicate right click change target and select the 5th one okay so yeah I'll start them with the rest so now when I preview and I click on the menu trigger they all come in together so I want a staggered motion to these so what I want to do is add a delay to each one so I'm gonna start the delay from the bottom and and work my way up because if I start at the top and start adding a delay webflow will rearrange all the time to actions and because they all have the same class name it could get a bit confusing so by starting at the bottom all the the menu items will stay in a sequence so here I'll start at the bottom they're each gonna have a delay of 0.1 so the first one is not gonna have any delay so it's going to be zero yes zero then point one point two point three and point four so the fifth one at the bottom here I'll start here it's going to have a delay of 0.4 and the opacity is well delay of 0.4 then I'll move up to the third it's gonna have a delay of 0.3 and a delay of 0.3 for the opacity then the second one yellow see 0.3 0.3 then yeah the third menu item is going to have the delay of point 2 and the opacity as well is going to be 0.2 and then the second menu item is going to have delay of point one and the opacity as well it's going to be point one all right and the first menu item is not going to have any delay so now when I preview and I click it has a nice dagger motion okay in the preview it goes a bit slow but in the browser it looks really nice okay so yeah that's all we have to do for the first click yeah so now for the second click yes we have the first click so for the second click I want to start at the bottom and then you have all the menu items go down from the bottom and then have the menu go down as well so here what I'll do is I'll click the first close the first click and on the second click we're going to start in animation I'm gonna duplicate the first click so I'll select these three dots and I'll say duplicate then I'll select D - 35 first click - and I'll rename it here - D - 35 second click so this is what's going to occur when the user clicks again we want to yeah close the menu so for the second click we don't need any initial States because we already set that first for the first click so I'm gonna delete all of the initial States so I'll just select delete delete for all the initial States and there we go so I want to create kind of the reverse animation so the first things that are gonna move out are the menu items then the menu wrapper and then we're gonna hide the menu so the menu wrapper I'm gonna just click hold and drag and place it after the the menu items and then the hide show for the menu the entire menu is gonna go all the way at the end okay so for the menu items we want to add the delay in Reverse and I also have a different a yeah different easing for the for the you have for the 2nd click so the easing for all of them is actually ease so for the movement just change it to ease rather than out expo and I just like having that effect for the closing of the menu so on all the movements for the menu item I'm just changing it to ease and yeah the menu wrapper can stay ease and out okay so we want to reverse the delay so because I want the first menu item to move out first so here in the Navigator I'll select menu item five and it highlights it here so it's in blue and we want to bring or actually first for the menu items let's change all the values back to 60% and a 0% opacity so here for the movement I'll just say 60% so it moves back down opacity 0 for the movement I'll say 60% and opacity 0 so these are the initial values for before they move in so it goes back to so goes back down and opacity 0% yeah it disappears and moves down so 60% on the Y and opacity of 0% and the movement yeah 60% and the y the opacity to 0% and then for the menu wrapper it's gonna move down 30% and the opacity of 0% okay and yeah we'll apply that in a second so we can see the menu items yeah all right yeah let's let's move it back to 0% so let's work with the menu items first we do want to change the the delay order so for menu item 5 here we have it here so I selected it this is going to have a delay of 0 and 0 for the opacity then I'll select menu item 4 and so we have here this is going to have delay of 0.1 and the opacity is 0.1 as well and menu item three selected here when you select it in the navigator it highlights it in the time to action so that can be a kind of a good reference or an easy way to know which which menu item you're working with because they all they all have the same class name yeah so for the third menu item that can stay at a delay of point two because it's the middle middle one then the second menu item is going to have a delay of 0.4 0.3 so the movement in the opacity 0.3 and the first menu item is going to have a delay of 0.4 and the opacity 0.4 okay so now they'll go in reverse it's not when I preview I click they all come in and when I click again they all move out perfect and for the menu wrapper let's see yeah select the menu wrapper and this is going to move down 30% and an opacity of 0% and then at the end for the hide/show we're going to say display:none again so we don't see the menu and it doesn't interfere with the user interacting with the website so I'll preview click on the menu trigger comes in here we have the menu click again goes out and perfect so that's a bit slow after the menu items go down it's a it's a bit slow so what we can do is start the menu wrapper movement with the menu items and then add a delay to the menu wrapper so I'll add a delay the all the overall time is about like 2 seconds for the menu item because it's moving pretty slow for the movement so I don't want it to start after the last menu item finishes I wanted to start kind of together not yet together with that last menu item so here for the menu wrapper we'll add a delay of something like 1.2 and the opacity will set it to 1.2 you can play with this but basically what's going to happen is it's not going to wait til til the last menu item finishes fading out it's going to the last menu item it's going to start fading out and then as its fading out the menu will will move down and close so yeah I'll preview click fades in click again and perfect so it's more of a like like an Steam type of thing so everything moves down it's not waiting until it all goes down and then moves the menu they the menu comes a bit quicker or closes a bit quicker alright so it comes in looks good close again and perfect nice it looks like curtains coming down which I really like and that's it you could start the hide/show quicker too but I'd rather wait till till this finishes the menu wrapper finishes its animation and then we'll say hide the menu completely so it doesn't interfere with the website okay so yeah that's pretty much it for this interaction we click the menu items come in click again and they go out so for some reason - plays a bit slower here in the preview but if I publish it I'll go ahead and publish publish to selected domains and I'll preview and I'll click and looks really smooth alright so yeah I really like this menu I like the movement and how it feels and it can make for a really nice menu for your website all right perfect so yeah if you have any questions about anything I went over we did work a lot with the menu items so there was a lot of time to actions in there but yeah if you have any questions about anything I went over definitely feel free to let me know in the comment section for the video or in the forum section in the members section alright and you can replace this menu trigger with another menu trigger from web dev for you comm all right yeah so I'll go back to the demo and let me actually close these here yeah I'll go back to the demo and looks good so you can have a nice website add some nice content and then have users kind of experience a smooth smooth animation there with the menu all right perfect okay so that is it for daily interaction number 35 to view more daily interactions and premium content visit web dev for EUCOM thanks for watching and I'll see you in the next daily interaction [Music]

Channel: WebDev For You

Views: 2,135

Keywords: webflow, web flow, webdev for you, webflow tutorial, webflow video tutorial, webflow tutorial 2019, webflow for beginners, webflow menu animation, webflow fullscreen menu, fullscreen website menu, panel reveal animation, sketch, figma, adobe xd, xd, avocode, invision, website prototyping, webflow animation, made in webflow, webflow interactions, responsive webflow, daily interactions, webflow website, web design in webflow, responsive web design, website builder

Id: RN_kNvg-j4U

Length: 36min 3sec (2163 seconds)

Published: Mon Mar 25 2019