Daily Interaction #1 | Menu Underline on Hover | WebDev For You | Made in Webflow

let's have some fun with daily interaction number one [Music] hey what's up everyone John with webdev for you and welcome to the daily interaction series where every weekday we build a new interaction or animation in web flow today we're going to build a menu underlying animation on hover so here when I hover over these menu items we have a nice underline animation and this can be a bit more interesting than just having like just the simple underline appear with this you can have a nice animation when the user hovers over the menu items alright looks good so to view more daily interactions and premium content visit web dev for eucom 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 and will use the daily interaction class naming convention so it's d - the daily interaction number so today is 1 and then the element so every element on the site will have ad - 1 in front of it and this is for consistency purposes and so that we know we're working with daily interaction number one all right then I'll add 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 D - one section for the height I'll set it to 100 VH so it spans the full height of the viewport and it will be the full width as well then for the background color I'll give it a background color of black then I'll go up to display setting and set it to flux and I'll set it to horizontal and justify:center and a line Center so anything we place within this section will be in the center so the next thing I'll do here is I'll add a div block and on the MS div block D - one menu wrapper so I'm going to place all the menu items inside of this wrapper so that later if I want to move the menu around it'll be easy to do that I can move it in the upper left upper right and things like things like that because normally you wouldn't have a menu in the center of a site so by placing in wrapper I can later move it alright so the next thing I'll do is I'll add a length block so I'll add an element and I'll add a link block so the reason I'm adding a length block is because we're having menu items so I would want to link it out to something so but so by adding a link block I can link it out to a URL a page a page section an email telephone number or a file all right so here I'll give it the class name D - one link block okay so now I'll add the text so here I'll add an element and I'll add a text block alright so we notice that kind of has this funky blue color and an underline so yeah we'll fix that in a second so here for the class I'll name it D - one menu item text okay and then to remove the underline I'll go into the navigator I'll select the link block and I'll remove the underline so yeah the reason that has that blue text is because it's in a link block so webflow saying this is a hyperlink and it's giving it the hyperlink styling okay so here with the link block selected I'll go to typography and here for the underline I'll say none all right and then I'll go back into the text and we'll style the text so I'll go to typography I'll set the text to circular bold and give it a font weight of bold and for the text I'll set it to white and let me go ahead and rename it in here so I'll say home for the first menu item and I'll give it a font size of let's say 44 I'm making it real big so we can see it nice nice and easy so you have font size of 44 pixels and the line height of 50 okay so the next thing I'll do is I'll add the underline so I'll go into the Navigator I'll select the link block and I'll add an element so here I'll add a div block and I'll call this d1 underline and I'll give it a height of 5 pixels and it looks good or let me do ten pixels all right and it'll automatically fill the the parents element because it has a width of auto and actually yeah the link clock is inheriting its width from the the text because the link block has a width of auto so it will inherit the width of its child elements so this underlined automatically becomes the width of the link block all right so yeah as a width of auto and a height of ten and then I'll give it a background of magenta so I'll select the magenta here and then I'll give it a negative margin because I want that underline to go a bit behind the text I don't want it to be right underneath it so here I'll just add in a negative top margin to bring it underneath and a little bit behind okay so now if I preview we have all the elements we have the text the underline and it's all in a link block okay so now what I'll do is I'll go into the Navigator and I'll copy the link block five times so we have five menu items so here I'll hit command C to copy then command V to paste until I have five menu items then I'll double click and I'll rename each one so home about services contact and yeah and shop okay then I'll select the first link block and I'll add some left and right margin so I'll hold down alt to effect the left and right at the same time all right looks good so there we have the met the menu items and now we want to apply the interaction so here I'll go into the navigator I'll select the first link block because I want the underline to expand or yeah go back to zero when we hover over the link block so I'll selected here I'll go into the interactions and it's going to be an element trigger interaction so here for the plus symbol I'll click the plus or here for the Helmand trigger I'll click the plus and select mouse hover and on hover we're going to start in animation we're going to add a new timed animation so I'll click the plus year and I'll name this D - one Mouse n alright so for this I want to affect the underline so I'll go to the Navigator and I'll select D - one underline I'll go back into interactions and I want the way the interaction is going to work is that first the underline is going to be at a scale of zero and then when we hover over it's going to scale to one which is its original size and then when we hover off it's going to go back to zero so here for the time to action I'll add a time to action of scale and the first thing I want to do here is make sure that this lock is not locked so yeah so it's unlocked so that the x and y axis are not constrained so that you know so that if I change the X the Y won't change if it is locked both x and y will change at the same time but I only want to change the X so that the underlying scales horizontally and not vertically okay so for the X I'm going to set it to a scale of zero so we don't see it initially and then for the timing I'm going to set it as the initial state all right so initially we can't see the underline and then I'll add another time to action so I'll say scale make sure it's it's unconstrained by making making sure this lock isn't locked and I'll set it to a scale of 1 so it goes from 0 to 1 yeah so it expands and then for the easing I'll set it to ease out expo and the duration of 0.5 is okay so now preview and I hover and the underline is expanding so we notice a few things here first the underline is in front of the text and the second is it's expanding from the center so we'll fix that after we add the interaction we also notice that the other ones are not animating so I'll go back into the interaction and for this rather than affecting a selected element so we're only affecting one element I can affect a class so action excuse me action will affect multiple elements with the same class so I'll select this here and now if I preview they all get affected at the same time so I want to affect only the underline for the specific link block I don't want to affect all the underlines at the same time so here rather than affecting all elements with this with this class I can say only children with this class an action will affect only the elements inside the interaction trigger so I'll select this and we know that the underline is a child element of the link block because it's inside of it so the link block is the parent element and the interaction trigger and the underline is a child element so only this specific underline will be affected okay and the other thing we want to do is we want to make all all of the link blocks and interaction trigger so right now only the first link block is it is an interaction trigger and we know that because we have the green circle with the lightning bolt symbol next to this link block so only this first one isn't his an interaction trigger so what I'll do is I'll go into interactions I'll close this here and right here for trigger settings rather than effect an element we want to affect a class so we want to trigger on all elements with the same class in that class is D - one linked block so now if I preview though all the linked blocks will be it an interaction trigger and will only target the specific underlined for each each linked block all right so now a preview and as we can see when we hover over each one only that specific linked block gets affected so now the last thing we need to do is add a hover out interaction so here on hover out I'll start an animation I'll duplicate the mouse end so I'll select these three dots and select duplicate and I'll click on D - one mouse in - and I'll rename it to D - one mouse out and for this we don't need an initial state so I'll delete this first one we only need one time to action to bring underline back to zero so here I'll delete the the first time to action and now we just have the second one and for this I'll change the X scale back to zero so instead of one we'll change it to zero and we want to affect a class and only children with this class so now I'll put in an easing of ease out expo is okay and and a duration of 0.5 is okay so it will have the same animation as it expands and as it goes back to zero it's now a preview and there we go so we have the animation so there's a few things here I want to bring the text in front of the underline and I want the underline to animate from the left to the right so here I'll go back into the into the designer I'll go into styles and let me go into the navigator and I want to select D - 1 underline then I'll go back into styles I'll go down to transitions and transforms and here where it says transforms I'm going to click on this gear icon it's all selected here and here we have the transform origin so this is from what point the underline is animating from so right now it's set to center so it's animating from the center and going out I wanted to I want it to animate from the left so I can select the left dot here so here we can select all these dots so I'll just select the left one so it animates from the left to the right so the transform origin will be on the left so here I'll close this I'll preview and there we have the underline animating from the left looks good and now we want to bring the text to the front so I'll go into the Navigator I'll select D - one menu item text and I'll go into styles and for this I'm going to set a position of relative so we can work with the layer property or the z-index of the text so yeah the z-index is or you have a z-index allows us to bring the element further in front or further and back behind behind other elements so yeah it is the layer property of the element yeah so right here we have the z-index so I'll set a higher value the higher the value the more in front it is so I'll set a value higher than zero so I'll say something like 10 and then the text will be in the front so yeah we set a position of relative and set a higher z-index value for the for the text it's now a preview and now the text is in front and the underline is behind and that's it that's how we create a menu item animation on hover there menu under line animation on hover alright looks good so now I'll demonstrate why I decided to place it in a wrapper okay so here I'll go into the navigator I'll select the menu wrapper and for this I'm gonna set it to a position of absolute so right here I'll SOTA to absolute and now I can position it in the top left top right bottom left bottom right bottom top I can set a display setting of Flex set it to horizontal Center Center to have the text in the center or the menu items in the center and yeah looks good so that's kind of yeah that's why I decided to place it in a wrapper because now I can easily move it anywhere I'd like so what I'll do here is I'll position it in the top right and I'll change the font size for the menu item so I'll select the menu item and set it to something like 24 and the line height to 30 then for the underline I'll set it to 2 5 pixels and the top margin I'll make it like negative negative 8 all right and then I'll add some margin to the menu wrapper so let's say something like 20 from the top and 40 from the right and it looks good so now when I preview we have this nice menu with an underline animation it looks like yeah because normally you wouldn't have the menu in the center so we're just moving it around and by having it in a wrapper we can move all the menu items at the same time and assign different properties to it alright looks good so that is it for daily interaction number one creating a menu underline animation on hover to view more daily interactions and premium content visit web dev for EUCOM so thanks for watching and I'll see you in the next daily interaction [Music]

Channel: WebDev For You

Views: 14,560

Keywords: webflow, web flow, webdev for you, webflow tutorial, webflow video tutorial, webflow tutorial 2018, webflow for beginners, webflow menu animation, webflow animation, made in webflow, webflow interactions, responsive webflow, daily interactions, interactions in webflow, animation in webflow, webflow website, web design in webflow, web dev in webflow, responsive web design, javascript animations, web animations, website builder

Id: p11282wUPLk

Length: 16min 18sec (978 seconds)

Published: Mon Oct 08 2018