Daily Interaction #21 | Flexbox Category Panel Reveal on Hover | WebDev For You | Made in Webflow

tied elements you can use opacity or display:none now let's build daily interaction number 21 [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 I'm really excited about today's daily interaction we're gonna be building a category panel reveal on hover so here when I hover over these different panels we can see that a menu appears and the user will won't be able to click on these different menu items to go to a different page or an external link on on your site so yeah it's really fun here we can see we have different categories painting drawing print ceramic sculptures and glass I just decided to pick this topic just to kind of showcase this here but we also have different colors and when you hover over the background becomes black and the links up here so it's a really nice effect it can be a really nice way for users to navigate through your site and this was actually inspired by the site here secrets de voyages calm and looks good they have that panel reveal effect there's a really nice site as well so here I'll scroll to the top they have this really nice background video and I scroll down and they have some really nice interactions and animations alright looks good so yeah this is what we will be building here we'll be building this category panel reveal on hover all right so to view more 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 and we'll start with the daily interaction class naming convention so it's D - the daily interaction number so today is 21 and then the element so every element on the site will have a D - 21 in front of it and this is for consistency purposes and so that we know we're working with daily interaction number 21 all right so first we're going to add all the elements we're going to add the panels and then we'll create interaction so that when the user hovers the panel expands and the menu appears okay so the first thing I'll do here is add a section so I'll add an element I'll add a section and I'll give it the class name D - 21 - a section and for the height I'll set it to 100 100 VH so it spans the full height of the viewport and it will be the full width as well then I'll scroll down to background I'll set the background color to black and I'll scroll up and I'll set the display setting to flux justify:center and align Center so anything I place within this section will be in the center so now now I'll add an element and I'll add a div block so this is going to be the wrapper for the panels so I'll give this the class name D - 21 wrapper and for this I'll give it a specific width and height and we can adjust this width and height on the different with devices but for now I'm gonna start with a width of 960 pixels and a height of 500 pixels so the panel's will go inside of this wrapper okay and I also want to set a display setting of flux and horizontal and justify start and a line stretch so we're gonna place diff blocks inside of here and because this is set to a line stretch those differ be the same height as this wrapper all right so now I'll add an element I'll add a div block and I'll give it the class name D - 21 panel wrapper okay so for this what I want to do we can see here that it's now a flux item and that's because the parent element here if we go to the Navigator and we look at the structure of the site so we have the section we have the wrapper and we have the panel wrapper so because the wrapper has a flex display setting this this panel wrapper because it's a child element is now a flux item so I can go to the styles and I can set it to expand so it fills the entire parent element and because the parent element has a display setting of a line stretch or flex align stretch it fills the height and it'll fill the width so it's trying to fill all the available space here all right looks good so I want six panels so I'll go to the Navigator and I'll select command C to copy and then I'll select wrapper and paste five more times until I have six panels so I have one two three four five and six all right looks good so now I'll go into styles for the panel wrapper as well I want to set it to a position of relative because we are going to have absolute position dibs inside of this panel wrapper and I want those dips to be relative to this wrapper yeah not relative to some other parent element so why by setting the panel wrapper to relative anything inside of it will be relative to it all right looks good so the next thing I'm gonna do is add an image so we're gonna we're gonna first work with the first panel wrapper and then we're actually going to copy and paste but I wanted a copy and paste first so we could see that we have six different panels all right so here we have panel wrapper the first one so I'll select it and I'll add an element and I'll add a div block and I'll give this the class name D - 21 this is going to be the image okay and for this I'll set a position of absolute and full so it fills its entire parent element which is the panel wrapper so because the panel wrapper has a position of relative this absolute position div it's is filling that panel wrapper because we set it to a position of absolute and full okay so now I'll scroll down to the background I'll add a background image so yeah I'll add a background image here I'll choose and and I'll select the first one is painting so I'll select this image of the painting I'll set it to cover position it in the center and I don't need it to be tiled so for tile I'll say none and I don't want it to be fixed either so I'll say pick none for fixed and looks good so now that we have an image inside of the the panel wrapper we can create or I can better showcase the the the panel expanding when we hover over it so to do that I'm gonna select yeah the first panel wrapper here and I'll go to styles and here we have States so I'll select States and on hover I'll select the hover state we're gonna click on this gear icon here in the in the flux item settings will click on this gear icon and on hover we're gonna make it grow to 2 so it gets a bit wider you could say like 3 or 4 depending on how wide you wanted it to get but for this I find that 2 works well so it's going to grow to a Flex basis or flex grow of 2 when we hover over it so now if I hover over any of these panel wrappers we can see let me preview here or actually let me go back to the non state and if I hover over we can see it expands alright so I don't want it to expand so quickly I want to add some easing to it so on the none state for the panel wrapper we can scroll down to transitions and I'll add a transition and for the transition property I'll set it to 2 all properties I find that when adding a transition to a flux setting I find that all properties works best because in Safari for some reason when it's when you try to select like flux grow it doesn't work as well in Safari but by setting yeah but sending it to all properties does work well in Safari and all other browsers there so I'll select all properties and for the timing I'll set it to 500 millisecond and for the easing I'll say ease so you can select from these different easing but I find that ease works well ok so I'll close this here and now when I hover we have the smooth expansion therefore the panel wrapper alright perfect so I wanted to add the image first so we could see that image expand as we hovered over the panel alright it looks good so the next thing we want to do is add the image overlay so if we notice in the demo each panel has a different overlay first they're all going to have the same one and then we'll assign a combo class to change the color for each so here for the first panel wrapper I'll add a div block and I'll give it the class name d-21 image overlay okay and for this I'll set it to a position of absolute and full so it fills the entire panel wrapper and I'll go to background give it a background color of this purple here and I'll give it an opacity of 80% so it's a bit see-through and we can see the image behind it all right looks good so the next thing we're gonna do is add the text so each category has a text applied to it so we'll go back into the panel wrapper and I'll add another element and actually before I do this I want that text to be in the center so I'll select the panel wrapper go into styles and we'll give it a display setting of flex and justify:center and align Center so yeah horizontal justify Center and align Center so that text will be in the center so now I'll go to the navigator yeah select panel wrapper add an element and I'll add a text block and for the text block I'll give it the class name d-21 panel text and I'll set it to a position of relative so it comes to the front and I'll quickly rename this here to painting but let's make it all lowercase painting and I'll style the text of bits and typography I'll say circular bold and I'll set the font weight to bold give it a color of white and I'll change the font size to let's say 34 and actually we can see that here we can see that this text is affecting the panel wrapper so rather than a position of relative I want to set it to absolute so it doesn't change the width of the panel wrapper and we're gonna rotate it so that it ends up vertically and it'll look good when the panel expands all right so yeah so we said it font size of 34 pixels and a font let's set the line height 250 pixels so now to rotate the text we're going to go down to transforms and we'll add a new transform so I'll click the plus here and we're going to rotate it on the z axis so it rotates counterclockwise and it doesn't rotate like on the X like this around the Y like this we want to rotate it so it just turns so on the on the easy access we're gonna say negative 90 so it rotates that text counterclockwise negative 90 degrees and it'll be in the center so perfect that's exactly what we want if I preview the text painting is in the center and looks good it's not going to get this wide once we add the image and all these elements to the other panels we'll see kind of how wide each panel gets all right so the next thing we need to do is add the the menu or that the menu links so to do that I'll select panel wrapper and I'm actually going to hide the panel text for the moment so it doesn't interfere as we're building the links so here I'll select panel text go into styles and I'll say display:none then I'll go into the Navigator I'll select the panel wrapper and I'll add an element I'll add a div block and I'll name this d - 21 menu wrapper okay and for this I'll set it to a position of absolute and full so first we're gonna have a menu a menu wrapper yeah so fills the entire panel wrapper and for this I'm going to give it a display setting of Flex horizontal justify Center and align Center so we're gonna have a menu wrapper and then we're gonna have a menu item wrapper and put the links inside the menu item wrapper and the reason we're doing that is because it makes it easier when we build the interaction to kind of work with the menu item wrapper it'll be it'll be a bit more clear in a second okay so inside the menu wrapper I'm gonna add another div blocks all at an element I'll add a div block and for this I'll call it D - 21 menu item wrapper and I'll give it a display setting of flux and this time I'm gonna set it to vertical because the menu links are going to be vertically stacked so I'll say vertical justify Center and align Center so if we go to the demo when I hover over we can see those links are stacked on top of each other all right looks good so let me go into the navigator and we'll look at the structure so we have the menu wrap menu wrapper and then we have the menu item wrapper so inside this menu item wrapper I'm gonna add text links and lines as well so I'll selected here I'll add an element and I'll add a text link so I'll select it here and then I'll style the text a bit so go to Styles I'll give it the class name D - 21 text link and let's see for the text I'm gonna set it to a circular book and yeah font weights of normal set the color to white and a font size of 14 pixels and a line height of 20 pixels looks good we do notice it has this underline here so to remove the underline for the text link just say none for the underline to remove it and perfect and I'll just rename this here to link 1 and it looks good so now we want to add so if we look at the demo there's a little line underneath so to add that we'll go back and here we'll select the menu item wrapper we'll add an element I'll add a div block and I'll give it the class name D - 21 line and for this I'll give it a width of 15 pixels and a height of 2 pixels for the line and I'll set the background to white okay so we have if we look here we have the link 1 and the line so now I'm going to copy the link for more times and I'm gonna copy the line four more times as well so we have five text links so yeah I'll hit command C on the text link to copy then I'll select the menu item wrapper and I'll paste five times then also like D - 21 line copy it command C to copy then in the menu item wrapper I'll paste five times as well then I'll just bring the lines in between the text links so that they're in between each text link and looks good then I'll select the line and add some top and bottom bottom margin so I'll go to styles hold down alt and yeah to adjust the top and bottom margin I'll hold down alt and give it a top and bottom margin of let's say 10 pixels all right so there we have the menu I'll just rename you know link 1 link to link 3 link 4 and link 5 all right looks good so now I'll bring back the panel text so we have the menu and the menu item wrapper in the text link and the lines inside of it so I'll select the panel text and I'll bring it back in so I'll say display:block to bring back the text all right looks good so we have all the elements we need to create the interaction what I'm gonna do now is actually go into the navigator say collapse all then I'm gonna expand to see all the panel wrappers and I'm gonna delete all the panel wrappers except the first one because the first one has all the elements we need for all the panel wrapper so I'll just hit command C to copy then select the rapper and then just paste six times there so that we can see we have six different panels and they all have the elements we need we'll change the image and the color after we've added the interaction I'm I also want to add some margin to the left and right of each panel so I'll select the first panel wrapper go into Styles I'll hold down alt here and I'll add about let's say 20 20 pixel 20 pixel margin to the left and the right of each panel and perfect so now I preview and we have those panels there yeah so now we can add the interaction so to do that I'll go back into the designer I'll select the first panel wrapper I'll go into interactions here for element trigger I'll click the plus and I'll select mouse hover so on mouse hover on hover we're going to start an animation we're gonna add a new time to animation so I'll click the plus and I'll say D - 21 mouse and alright so the first thing I want to occur I want to hide the the menu the menu item wrapper so we don't see the links and I want to move it down 20% so if we notice in the demo when we hover over the menu item the menu items move up a bit and they appear so in the interaction I'm gonna select here I'm going to select the menu item wrapper we don't need to apply to the menu wrapper because it's transparent or yeah and we actually just want to affect the menu item wrapper so I'll selected here I'll go into interactions add a new time to action and I'll select the opacity and I'll set the opacity to 0% so we don't see it and I'll set it as the initial state so initially we can't see the menu items and then I'll add another time to action I'll say move and I'll move it down 20% all right and I'll set it as the initial State okay so the next thing I want to happen so when we hover over the the image overlay disappears and then we add kind of a black overlay to the menu wrapper and then we have the the panel text disappear then the menu comes back in and it moves up 20% so we'll just add that so the first thing I'm going to do is hide the panel text so I've selected here in the Navigator and I'll say add a new time to action I'll say set an opacity of 0% for the easing I'll say ease so all these interactions will have an easing of ease because I find it looks really nice with that easing and it'll have a duration of 0.5 all right so the next thing I want to do is hide the or set the opacity of the image overlay to 0% so I'll go to the Navigator I'll select the image overlay go into interactions at a new time to action I'll say opacity and I'll set the opacity to 0% give it an easing of ease and I'll start it with the panel text so I'll click hold and drag and place it on top of it so they start at the same time so all of these times actions are going to start at the same time and have the same duration all right so the next thing I want to do is add a black overlay to the the menu wrapper so here I'll select menu wrapper go into interactions at a new time to action and here I'll say BG color for background color I'll set the background color to black with an opacity of 80% so it's a bit see-through and looks good there I'll click oh yeah give it an easing of ease click hold and drag to place on top of it so it starts with the other ones looks good and now I want to bring the menu item wrapper I want to bring it up or I want to have it appear and bring it up 20% it's also left a menu item wrapper I'll say opacity bring it to 100% give it an easing of ease click hold and drag place it on top of the other to start at the same time and then I'll move it so I'll say move and I'll move it up back to 0% which is it which is its original position then I'll click hold and drag to start it with the other ones and give it an easing of ease all right looks good so those are the time 2 actions that we need so now if I preview and I hover over perfect so we can see the we have all the interactions we need the overlay fades out in the text fades out we have a black overlay and then the menu comes in all right looks good so I do want to have this be applied to all panels so to do this we want to rather than effect here if we select the time to action we can affect a selected element or we can select specific classes so here we're says effect I'm gonna select class and action will affect multiple elements with the same class so I'll select it here and here rather than affecting all elements with this class I'm going to affect only children with this class so action will affect only the elements inside the interaction trigger so here I'll select it and we know that all of these elements are children of the interaction trigger because if I go to the navigator the interaction trigger is the panel wrapper and we know this because it has the green circle with a lightning bolt symbol and that means it's the interaction trigger and all the other elements are inside of it meaning that their child elements of the panel wrapper or the interaction trigger so the panel wrapper is the parent element and the interaction trigger and all the elements inside of it are children elements of the interaction trigger so here I'll go back into the interaction so we just want to apply that setting to all the elements here in the timed actions so I'll select it select class and select only children with this class and select this one select only children with this class and class and only children with this class so the element is added more than one time in timed action it'll apply that it'll affect that all the elements within timed actions with the same class so yeah you'll know that you applied it because there's this paintbrush symbol with a blue background all right so now if I preview we can see it's still only applied to the first panel here so to apply it to all of them I'm gonna close this and here rather than triggering just an element so right now we're only triggering one panel and we know this because only this first panel wrapper is an interaction trigger so rather than triggering just one element we're going to trigger a class so any class with the class name or any element with the class name D - 21 panel wrapper will become an interaction trigger so we select class here and now if we go to the navigator all the panel wrappers are an interaction trigger and we're only affecting the children of each interaction trigger so each panel will have that effect all right so now I'll preview I hover over and perfect so we're only affecting the children of each specific interaction trigger all right looks good so now we just need to apply a hover out animation so that when we hover out it goes back to its original state so to do that we'll select the first panel wrapper I'll go to interactions and on hover out we're going to start an animation and here I'm going to duplicate the mouse in because it already has a lot of the settings we need for the mouse out so I'll select these three dots here and I'll say duplicate and I'll select D - 21 mouse in - so I'll select it here I'll click on it and I'll just rename it to D - 21 mouse out and for the mouse out we don't need initial States because we already set that for the mouse and interaction so I'll just delete these here so I'll select them and delete the initial states and here we just need to change the values for all of these elements so they're already here we just want to kind of add the reverse animation so for the panel text yeah so the reverse would be the menu moves down and disappears the panel text comes back in the black overlay disappears and the color overlay comes back in I also here for the panel text rather than an opacity of 0% we'll set it to 100% then the image overlay rather than 0% we'll say a hundred percent the menu wrapper rather than a background color of black with an opacity of 80% will set it to transparent and the menu item wrapper will set it back to zero percent so we don't see it and we'll move the menu item wrapper down 20% so it disappears and moves down to the next time it comes back in it'll move up all right and that's it and it is affecting the class and only children with this class because we copied it from the the mouse in interaction so it those settings are still applied to it so now when I preview perfect so we hover in comes in however out it disappears and we have that category panel reveal effect all right looks good so the next thing we're going to do is change the text for each category and we're going to change the color and the background image so I'll go into the designer and I'll go into the navigator and for for each one what I'll do is I'll hide the menu the menu wrappers also let the menu wrapper and for display setting I'll say none so I can just double click to rename the text and I'll rename this to pesos painting drawing let's see the demo here print yeah so the third one is print and we have ceramics then sculptures school Cheers yep and glass okay all right yeah so there we've renamed them now we want to change the image for each one so let's it change the image what I'll do is on the second panel rapper I'll select D - 21 image and then I'll give it a combo class of two so we can apply specific properties - to this to this image so we can change the image and it will only be applied to this panel because we added a combo class of two so I'll go to the image click on it and background say replace image and I'll choose this image of drawing then I'll go to the third panel select D D D - twenty-one image give it a combo class of three go into ya go to the background here click on the background select replace image and I'll select this image of the book I'll close this here go to the Navigator select the fourth image in the fourth panel give it a combo class of four go to the image click on it so let's replace image and I'll say these image images of the bowl for this image of the bowl then I'll go into the fifth image give it a combo class of five and go to the background replace image and I'll select the sculptures here go into the Navigator select the sixth image and give it a combo class of six and click on the background replace image and I'll say select this image of these flowers in different classes okay so that we've changed all the images and it looks good so now let's change the the color overlay so we'll do the same thing basically we did for the image will do for the overlay so here for the second panel wrapper I'll select the image overlay go to styles give it a combo class of two for the background I'll select let's see here the magenta color so I'll select the color here select the magenta and give it an opacity of 80% then I'll go to the third image overlay going to styles and yeah give it a combo class of three go into the color select blue for the background color and then opacity of 80% going to the Navigator select the fourth image overlay give it a combo class of four go into the background and I think it's this lighter yet lighter pink select the background select the lighter pink give it an opacity of 80% go into the Navigator select the fifth image overlay give it a combo class of five and this one is I think the darker ya darker purple so select it here I'll select this darker purple and give it an opacity of 80% and then the sixth image overlay here in the Navigator give it a combo class of six so we can apply individual properties to it and click the background and give it this magenta color here and say 80% for the opacity and perfect so each one has a different color and it looks good so let's bring back the menu wrapper now so just scroll up here select menu wrapper in the first panel wrapper go into styles and how to display setting a flex so I'll just select flux here instead of none so just say flux and it'll bring back the menu wrapper so now if I preview the each have different color and we have that interaction alright so the last thing we need to do is add this alternating up and down to the 2nd 3rd and 6th wrapper or 6 panel so that yeah one certain ones are up and down soil has an alternating effect so to do that what I'll do let's go into the designer and I'll let me collapse all so for the second rapper I'll select it here I'll give it a combo class of down and scroll down to position it has a position of relative and from the top I want to move it down negative 60 pixel so it goes so it moves down 60 pixels from the top so I'll say negative 60 and it'll move that panel down so now if I preview we have this alternating effect where the second panel is lower so I just need to apply that same combo class to the fourth and sixth panel so that they move down as well so I'll select the fourth panel in the Navigator and I'll apply the combo class of down it moves it down then the sixth one I'll apply the combo class of down and it moves it down as well and there we go we have the alternating panels with the menu revealing there are the links revealing they're all different colors they all have different text and looks good in different images behind them all right looks good so I know I covered a lot in this video tutorial if you have any questions feel free to ask me in the comment section for this video or in the forum section for this daily interaction alright it looks good and let's look at the the different devices so on tablet it looks okay mobile landscape it's a little bit thin more mobile portrait I'd probably change the design for mobile portrait on mobile landscape what I do here is maybe reduce the margin on the left and right of the panels so I'll select the panel wrapper scroll down to the margin hold down alt and just give it a margin of like 10 pixels all right and yeah mobile landscape maybe I might change the design for mobile landscape mobile portrait definitely looks a little bit too thin but let me preview yeah so here we have it on desktop tablet looks pretty good so the user would tap to kind of reveal the links and then mobile landscape not bad still looks pretty good so it's a bit thin but could kind of get away with it there so yeah that's mobile landscape and mobile mobile portrait yeah it's definitely a bit too thin so I probably changed the design for mobile portrait and probably mobile landscape as well but you could get away with it looks pretty good but yeah tablet looks good and desktop definitely all right so it looks good yeah just might change the design for the last two here all right yeah so that's it for yeah daily interaction number 21 we did cover a lot but I thought this was a really fun interaction it was inspired by this site here secrets de voyages comm where they had this panel reveal effect and the links inside of it it is a really cool site so yeah just yeah panel secrets to voyages comm all right yeah so that is it for daily interaction number 21 the category panel reveal on hover looks good all right so 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: 6,944

Keywords: webflow, web flow, webdev for you, webflow tutorial, webflow video tutorial, webflow tutorial 2018, webflow for beginners, flexbox in webflow, flexbox, flexbox animation, flexbox on hover, sketch, figma, adobe xd, xd, avocode, invision, website prototyping, webflow animation, made in webflow, webflow interactions, responsive webflow, animation in webflow, webflow website, web design in webflow, responsive web design, javascript animations, website builder

Id: gzdU0Lm-EyM

Length: 37min 4sec (2224 seconds)

Published: Tue Jan 01 2019