(Part 2) Webflow Responsiveness & Interactions 2021 - Advanced Follow Along Tutorial

what's up youtube welcome back to the channel for webflow pros this is part two of our figmento webflow tutorial if you didn't see part one i'll leave it in the description of this video today we're going to be building out the interactions of this site and making it fully mobile responsive so let's go ahead and dive right in all right so in the last tutorial i accidentally changed the container top and bottom padding let's actually switch that back to 2.7 for top and bottom that means the nav is going to be a little bit large so with that container selected we can do is nav bar and then we can maybe just reduce the top and bottom padding to maybe 0.8 or something something like that and that's looking good there while we're at the nav let's also go ahead and animate some of these nav menu links so we'll work on interactions just drag a div inside the nav menu and we'll call this menu underscore line because this is the line and then we need to set its parent the menu link to position relative so that way we can absolutely position the line and we'll do the bottom left corner right here let's set its height to one pixel it can be really small width to a hundred percent and let's give it a background color of our main color and let's go ahead and just copy that line and let's paste it inside each one of these links what you're noticing is that it's uh full width of the entire link right there so what we can do instead is remove this 1.2 am padding and add it as 1.2 am margin to separate it like that and that's pretty much creating the gap we need and then with the menu line selected what we can do is also scroll down under transform and we're gonna have it start off to the side so we're gonna move it over this first field negative one hundred percent so it's completely over by a hundred percent um and actually just i find sometimes when you do that you see a little bit of the line peaking in so i do a hundred and one percent just to push it over a little bit further to where we don't see anything peeking in um and then what we'll do is with the menu link select it set the overflow to hidden so it just crops that line outside of this uh container and then we can create an interaction on hover that slides it in so with the menu link selected let's come over to the interaction tab element trigger it'll be mouse hover we'll apply this to the class and we can only hover on desktop so we'll uncheck all the others create a hover in this is going to be called nav link in and what we're going to do is basically grab this line right here and we're going to come over to the action create a move action and set this as an initial state and it's going to move negative 101 just like that so that's how we want it to start and then we'll create another move over here and then we're going to move it into view so that'll just be zero percent to move it right into view right there we'll set our easing to something like out court so that way it's really just smooth and then we'll also want to gray out all of the sibling nav links so what we'll do is grab the menu link right here and then we'll set its opacity by default all of the siblings it says only siblings with this class are 100 and then we're going to grab them here and drop them down to 30 so they'll just be grayed out and apply the same easing we have here of out court and then what we can do is actually just sort of duplicate this nav in for the hover out and then we'll open it up and rename it uh out and then we can delete our initial states we don't need them there we're going to bring the siblings back to 100 opacity and then we're going to move them this time instead of moving them back to where they started we want to move them out the opposite way so instead of negative 101 percent it will just be positive 101 percent it will push them out the other way you're not seeing it in this preview but we'll see it when we actually preview the whole site and then we just need to move it back to where it started negative 101 percent that way this can loop and this can be a duration of zero we don't actually need to see it move from one side to the other but we just need to bring it back to where it started so then we can save this and preview now when we hover in grays out the sibling the line slides in then the line slides out the opposite direction whenever we hover out and that works for every single one of these because we applied it to the class and because each one has a line inside of it so that's looking great there for this for now i think i'll just do something really simple we'll create a hover that mainly changes the text color right here and it'll basically do that and so that way it doesn't snap to that color we'll add a transition we'll apply it to font color and that's fine there and if i want this to this uh circle div background color to also change copy the class of this circle here if i want it to also change come over to the custom code section embed on my page and then do a period paste the class name and then we're gonna set the background color right here to the current color that just means the color the font color of the parent and now when i hover over that the circle color is changing also next let's set a hover state for this button so we have this button here called main button whenever we hover over it we just want a circle to sort of fill up the background color we can drag a div inside and give it a class of main button circle and then we're going to need to absolutely position the circle to its parent so the way we're going to do that is set the parent to relative and then the circle right here will be position absolute we're going to anchor it to the full top right here it's width it's going to be a hundred percent um but this button may grow in width depending on which section we put it in or how much text is inside so we need to calculate the height dynamically and we'll do that by putting top padding of a hundred percent and that's going to make it a perfect square inside this button and then we can set the background color to our main color we can set the radius to a hundred viewport width to perfectly round it and then what we can do with the main button selected is set the overflow to hidden it's just going to crop this circle inside and what we can do is actually apply a transform that moves it up negative 100 so it's just going to start right there at the end of the circle it'll start out of view whenever we hover on we want it to basically slide underneath this text so that means this main button circle right here is going to need a z index of at least one and then this text right here we can give it a class of main button p for paragraph and we'll need to set its position to relative actually and it'll be as the index of two so it's above the circle and then what we can do with the main button selected is create a element trigger mouse hover applied to the class only on desktop and then we'll create uh one hover will be button in and then what we want to do is basically grab the circle right here and then we're going to go through the same process that it's moved to negative 100 for this field so we're pushing it off to the top that's an initial state and then we want to move it down maybe 40 let's try 40 percent um maybe let's see so we can do negative 40 percent that means the circle pretty much covers the whole button right there and then we'll also want to change the font color of the main button so by default the text color is this main color and then we want to change the text color right here um to this dark color here if we preview that it just slides in and fills up we can even set some sort of easing maybe let's try out court yeah that looks good and then that is pretty much all we need for the hover in so let's just create another one and then we'll duplicate the button in select it and then we'll rename it to say out and then we'll delete our initial states and then this time we want the button to move the opposite way so it'll be positive 100 that way it just pushes it down completely out of view of the circle and we want the text color to change back to our main color and then we need to bring the circle back to where it started so move will be negative 100 percent and then duration will be zero that way when we hover in again it still works um and that's applied to the class so let's go ahead and preview this and see how it looks we got that hover in hover out it's filling in filling out um and that's looking good so let's go ahead and publish it now in safari what you'll notice even though we have the overflow set to hidden because the parent has a border radius we're seeing sort of a square shape it's not being perfectly masked or cropped inside of that parent shape so we can fix this with a little bit of custom code if you head over to my public code collection you'll see one of the links is for safari to inherit border radius which is just this little bit of code right here that's going to make sure that mask stays in place on our class of main buttons so we'll basically go over to our embed open that up and then we'll paste this in here and give it the class of main dash button and then just save and publish and then back on the main site you'll notice that the shape is being masked inside the parent all right let's uh go ahead and animate this circle here we're going to drop a combo class of islink on it and then we're just going to set up a simple hover interaction that's basically just going to add a transform here and we're going to scale it down maybe something like 0.9 and then we can change its background color and then back on the main class we're going to add a little bit of a transition that way it just scales down instead of snapping and that looks good there for this section here we can create a while scrolling interaction on this merge class here we'll create an element trigger while scrolling into view applied to the class and since it's scroll it can happen on all breakpoints we'll start an animation and call this merge images and then we can start by selecting this larger image grid item here we can move and maybe we'll move it down by 6 em so it just pushes it down and then over here we'll pull it up negative 6 am and then we'll go over to this image here since it appears to be closer to us it needs to move a little bit faster so we'll just increase the distance this time we'll push it down by maybe 10 am and then we need to make sure all this content is on a higher z index so that way it's on top of that and then over here we'll pull it up negative 10 am and then this image here just to create even more depth we'll have it going the opposite direction so it'll start out negative and maybe we do negative 8 am and then over here it'll actually go to the positive positive 8 a.m and then when we preview that what we should see yeah is this one's moving opposite and then these two images are moving at different speeds and then we can save this and increase our smoothing maybe something like 80 so it feels a little bit nicer and then i'll select this entire grid right here which is merge column the first one set its position relative z index to two and that should put it on top i'll just give this one a z index of one should put it on top of this one here i think we're gonna leave as is for now and then this one we want to move that text whenever we're scrolling over this grid as resources so let's create an element trigger again it's a while scroll into view applied to the class all breakpoints and what we're going to do is actually call this resources section and we are going to select this entire resource text the first one and we basically want to move it uh maybe we'll move it uh 24 em so that's basically going to push it to where this first word is just barely getting cut off you'll see when i apply a move here it removes my rotate so i'm going to have to add that back on but we'll move it over here negative 24 em the opposite direction to where the end of this is being cut off and then we can apply our rotate which i believe was this last field of negative 2.5 and then we need to apply another one here and it's just going to do the exact same thing negative 2.5 degrees and then we can do this one here this first one was positive 24 so we'll just do the opposite to make this go the opposite direction it would actually be negative 24 em and then it will move over here to positive 24 am and then we need to apply the same rotate so we're going to apply this rotate of negative 2.5 degrees and then over here exact same rotate negative 2.5 degrees and then let's preview this so they should move opposite directions and whenever we scroll into view that is perfect they're moving opposite directions and let's add a bit of smoothing to this and that looks great there um for this next one whenever we hover over one of these social icons i think we'll basically make the border radius uh full transparency and maybe scale it down maybe scale the icon up so let's just save this transparency as a swatch i'll call it trans uh parent and then we'll just save that and we're going to create a hover on the entire social link so this parent link block right here element trigger mouse hover applied to the class this would only happen on desktop on hover we would call this social in and basically what we're going to do is grab this social circle and we're going to animate basically it's border color set this as an initial state to the transparent value and then the border color will change here we're going to set to full opacity and then we'll also do a basically we're going to add another one that's going to scale it down so by default it's going to be 1 and then here we're going to scale to maybe 0.9 or something like that and then that pushed the link block the social icon down so we're actually going to set a scale to 1 here and then this time we're going to set a scale that scales it up like this and then let's set some sort of easing on these maybe outport and let's preview how that looks right there yeah so it's just basically that circle shrinking around the social icon whenever we hover and then we can create our hover out and duplicate the one we have and instead of social m we'll call this social out and then delete all our initial states and we need to change everything back to the way it was so this is transparent this would be a scale of one and this one would be a scale of one as well and then we can save that and we're good there and let's just preview so when we come over to this section we hover over each one of these and the circle basically just scales down around it and that's looking great lastly we can go ahead and set up mobile responsiveness so what we can do we'll set up the hamburger icon first if we open up our nav so we have our whole nav the grid and then there's these grid items this one's the logo this one is the menu and then we can add maybe another div inside there and then this could be underneath the menu and we'll give this a class of grid item as well and then we're going to add a class of is a hamburger to this so this will be our hamburger icon um and inside that grid item maybe it's with can be uh we'll leave it with at 100 for now um inside that grid item we want to drag in this lottie icon that i have here so we'll just plug that in here and then this can be called uh hamburger since that's the name of our component underscore icon since it's an element inside maybe its width is something like 2 am or a.m yeah let's go let's go 3 a.m for now and then we're going to grab this entire grid item it's parent and we're going to actually make this a link block because it's clickable and we're going to set this to display num we don't need to see it at l on desktop and then we can go over into mobile so in mobile view right now um what we have is the body font size is changing before it was uh one viewport with so if you see what it was on desktop things are just getting way too small and especially when we come down here to mobile view it's almost impossible to read so we had to change the font size on tablet and below and then what i usually recommend for this is actually just setting a pixel font size so maybe the font size could be something like 12 pixels 14 whatever and what you'll notice is when i increase the font size of the body right here when the body all pages tag every element inside is growing or shrinking in size um because it's all based on the body so when we set the body to pixels then everything's just going to start wrapping you'll see nothing is really scaling and usually i would just come over to the heading set the headings maybe the larger ones to viewport with the paddings inside our containers and grid items to viewport with on the left and right that way those just sort of um scale but in this example because so many items are wrapped and applied specifically to the grid i think that setting we'll have to set more elements to viewport with then we'll have to set to pixels so i'm actually going to do something a little different in this example and actually just set the body font size to 1.5 viewport width so it's a little bit larger than desktop but still things are kind of scaling and then the elements that we don't want to scale will just override by setting to pixels so paragraph would be a good example of that i'll go to the paragraph all paragraphs tag set the font size to 12 pixels since this is sort of some micro copy there and then that stuff won't scale another thing that i won't want to scale is the space in between our containers the padding top and bottom because that can get really microscopic and i want to keep a good bit of space in between those containers right now it's a 2.7 em what i usually do is just set that maybe 27 pixels just switch it to what's pretty close to the pixel equivalent of the em value so that way it'll just stop scaling there and then we can come adjust some things that we need to adjust like maybe this heading we just reduced the font size and ems a little bit to get it to align all in one line right there and that's looking okay for that part we're going to set this grid item of is menu to display none and then we're going to set the grid item of the hamburger to display block and then we'll set its width to auto and then we'll also set the this grid item the nav logo um this width on this one can be auto as well um that way it's based off the elements inside of it and let's also set this grid item to flex and center up the logo inside so it's aligned from top to bottom and then with this grid selected we'll add a combo class of is nav and then use that to flex these items apart um and that's looking pretty good these are going to scale down and they're going to get too small like especially here so usually if there's an element i don't want to scale i'll just go ahead and set it to pixels right from the start so i can do that by um with this uh logo image selected here can just set that to maybe 52 pixels would be pretty close to what we have and then this hamburger maybe 30 pixels so something like that and then the paddings will still scale inside that element but the elements themself will have a max size sort of applied there and that's looking great all the way down this is all i think fine for now um this we need to change so we'll probably need to wrap these banner items we'll set their width to 100 and then we need with the their parent selected we need to change the flex direction um to basically center them up and maybe we yeah just center it like this um and then here we're going to need to um we'll add a combo class is first that way we can basically add a bit of bottom margin to pull these apart like that and then these two aren't completely aligning that's because this uh is being stretched because it's in flexbox it's being switched so we'll just set it not to shrink and now those two paragraph texts are aligning with each other um here we can actually reduce a bit of the padding so maybe we'll do something like uh this 2.84 and then we'll apply the exact same padding to the second grid item here um and that's looking pretty good i may even apply flexbox to center up this inside the container and then here we're just going to need to switch this width to a hundred percent width um and then let's see we'll also want to grab the parent of this 100 width item which is the merge and basically switch the flex direction so they stack one underneath the other and then this one here will also be 100 with um and then we may increase the height of this image we're going to set the height using ems before it was uh a hundred percent of the column next to it but now there is no column next to it so we need to set a height here and when we're setting the height in the ams like this that means the height is actually just going to scale up and down with the width of the browser and then this merged item here maybe we do negative 40 on this side and then here we can do negative uh we don't actually don't need a negative margin we can just set this side to zero and then we can increase the height of this image so i'm still trying to keep things pretty closely aligned to the grid um that way when we scale up and down it's like staying within a certain alignment um but yeah that's looking pretty good here i may increase the width of this item it was 40 when we do 60 so it'll be six columns and then these right here they're parent with which was the grid item here maybe we'll switch it to 15 so they're a little bit larger they can still scale up and down but that's looking good there and then we need to go ahead and set basically our menu so our menu right now we had it set to display none but we're going to need to be able to hide and show it so that would be if we open up our grid that would be the second grid item here let's just grab that menu and set it to display block for now so we can see it we'll set its position to absolute to the top and we'll set its width to a hundred percent of the parent and we can also maybe give it a background color so it's a little bit easier to see um and let's also let's go ahead and give it a set height well no actually we won't do a set height in this case um let's increase the padding inside this and i'm actually going to set that padding using pixels because see it's starting to get a little too close to this icon these icons are pixels so we want this padding to also be set using pixels um that way it doesn't uh shrink underneath those and then we also need to put it behind the nav menu so we'll give it a negative z index negative one that way it's behind these and that's looking good there this one this uh menu button right now still has a flexbox applied so with the entire grid item let's just flex everything to vertical so they stack under each other let's flex everything to the center and then let's get this uh menu link button and let's remove that auto margin to just zero so it centers it up and let's add a bit of padding i'll actually set pixels here because i don't want this size to scale down and then the padding's on the side i'm just going to align it up here that can still be ems because i want that those side paddings to scale up and down and then all this is set using pixels from the link block what we can do is we have this paragraph text set to 12 pixels because it's our all paragraphs font size um we may want to increase that size a little bit so we can call it uh nav what do we call these the parent of these were called menu link so we'll apply a class to these and call this menu p and that will go on each one of these links that way we can increase the size of these because we will probably want them to be a little bit larger than our average paragraph text size on mobile so we're just going to apply combo classes to each one of these and then we'll increase their font size maybe something like 20 pixels doesn't have to be that large and then this one here um we'll kind of do the same thing so we can add that menu p tag right here to increase the font size this component here instead of changing its width height margin and the width of the icon inside because all of that is set to ems right now what we can do just with the whole circle selected is increase the font size of the parent using ems and you'll notice that the margin the width the height and the icon size all scales up in size with that parent so if we do 1.3 that's going to look good there and then with the menu link selected let's also add just a bit of top and bottom padding so that way it kind of spaces these out and increases the clickable area a little bit i may even add some side padding i'm going to remove this side margin so that way it stays centered and then this menu button here will add a bit of top margin to separate it from the others so this entire menu is pretty much set up now and it scales uh all the way down we do have a bit of wrapping because this isn't a flex set to no wrap let's see if it's still shrinking that icon it is because there's just not enough space for these so on this breakpoint where did it start shrinking kind of when this break point we may just switch the flex and then we'll do like this so that way the icon is on top and then the icon is scaling down because the font size is ems and the ems is based on viewport width so it's scaling up and down let's actually just set the font size using pixels to this component here and then it should now sort of just lock in place and that will solve this problem here as well when it starts to stack which i think we stacked it here we'll set the side margin to zero and we'll put a bit of that bottom margin right here and that is looking good so we have this stacked and separated and one other thing i may do is increase the padding right here and add a bottom border of one pixel with our font color to this menu so that way we have a clear separation where the menu is let's set the menu to display none and then let's set up our interaction so it's one click of this grid item we'll head over to the interactions panel mouse click apply to the class this won't happen on desktop so we'll uncheck desktop and let's go ahead and create a um we'll call this nav menu and what we want to do is select the entire menu which was this grid item here and then we're going to set its initial state to display none by default so we're not seeing it and then we'll change it to flex so that way it flex those inside and then from there we can also maybe animate it a little bit so maybe we move it negative 100 when the initial state and then here we move it down uh zero percent like this so it's just going to slide from the bottom and then we can apply maybe an out court easing to really speed it up that looks great and then we can also animate this lottie so right now we'll just start the lottie at zero percent and then we'll bring the lottie up uh in this case all the way to it looks like about the 50 52 mark so we play that that's what's happening for our menu and that looks great and then we'll also create another animation uh we'll duplicate the nav menu and then we'll create one called nav menu close and then here we're just gonna delete all these initial states we're going to move the hide show till after all the animations happen and set it back to display none so it hides it and then the lottie we're going to bring back to 0 and the move we're going to bring back to negative 100 and we can save this and we're good there let's go ahead and preview so we click it opens click again and it closes it's just sliding in and out uh just like that so our menu is good it's fully responsive and working across all breakpoints let's go ahead and go through the rest of the page so this section is looking great to me this section in and out looks great here we're good i think we're good on all of these sections so let's jump down to the next break point and uh right here what i really want to do is probably change the width of some of these columns so this grid item here i'm actually going to remove this margin set it to zero and then i'll set its width to 50 of the parent and then this hero photo all set to 50 as well so those two are just stacking side by side and then this grid item down here at the bottom we're just gonna set to a hundred percent width and then we'll probably increase the height of this image a little so it's not cropped so tight and then that looks good there um this is all looking good here and then in this section i think we're still okay this text is starting to get a little small so what i'll do is go to the all h6 headings tag here and convert it to pixels maybe something like 15 pixels or 14 and then that looks good it's just gonna start wrapping instead um this is all good here one thing i may do with these grid items is make them i'll make them a little taller for now so we'll just go over to the height just increase the height a little bit and that's scaling in and out i may want a little bit of padding separating this so with this merch column too i'll just create a little bit of padding here and that's going to separate that there i may even reduce the padding here a little bit and maybe increase the font size of this h3 heading to where it's a bit larger something like that um and then that looks good there here i may start to increase the height a little bit of this image and then if i want to increase the height of the text inside all i had to do not even grab the text or the logo but grab the card content and set the height to uh 1em which is uh since the body font size is set to 1.5 viewport width 1em would be the equivalent and then i'll just start increasing that font size and you'll notice that the width of the logo grows the margin grows and the width of this text so everything's based on the font size of the parent so now when i scale that in and out what you'll notice is that is all growing as well there this still looks good here that looks good to me there and then over here i'm gonna change some things this uh top padding will be in pixels so that way we're just keeping that separation um and that's not gonna shrink or grow the size of this heading here i'm actually going to increase the font size a bit and i'm going to stack it on two lines like that and then this descender here in the text is cutting off so we can add a little bit of padding to this to make sure the descenders don't uh stake out because of our line height so maybe at 0.2 am padding there um that's all looking good i may stack these grid items so maybe this is a width of a hundred percent and maybe this one can have a width of a hundred percent here and then maybe we increase the height um on this image maybe it can be pretty tall and these right now are getting a little bit too small these circles here so what i can do with this hero circle selected is set the font size to pixels and this one has a combo class let me remove that combo class of islink for a second so that way it affects both them set the font size to pixels and then i'll add that combo class back on and now these are locking in place at a certain size they're not just going to scale infinitely i can do the same with the button maybe set its font size to 12 pixels and then it'll lock into a certain size and stop scaling this three bottom margin i'm using or three bottom padding i'm using somewhere else as well set that to 30 pixels so that way that stays locked in scaling and then this hero album i'll just increase uh create a little bit of padding now that we stack them with these to be spaced apart and may even increase the height of this even more um that's looking good there and then in this section maybe instead of 30 we do 20 for these two yeah that looks good and then for this image here i may create a little bit of bottom margin to separate those out um that looks good there here things are really out of whack so the smallest version here it was still working but here we're going to need to start stacking things so we'll do 100 and then here on this grid item we'll do 100 as well and then we'll also set the pixel font size maybe 12 pixels or maybe six pixels seven one of these icons so that way they just uh maintain a certain size and don't get too small and then we can even set pixel padding's top and bottom in this container to basically create a bit of separation there that's all working here things are getting way too small so i may go ahead and set the width of these items let's try fifty percent yeah that looks pretty good there um and we could leave it stacked like that honestly or i may stack them side by side by grabbing the merge link and switching this horizontal distribute part adding a little bit of padding here you'll notice my h5 is getting a bit too small i'm going to leave it scaling with viewport width though so we'll leave it set to ems and just increase the font size a bit that way it can scale up and down whenever we drag this out it's going to keep scaling for us and stay inside this is all good there may increase the height of this photo a bit because it is a tiny bit small and then i may increase the padding here on this photo to make it more of a vertical like that looks good there and this i think is still looking fine these get a little small especially when we go down to the smallest version here so what we could do is set the width on their parent to make them all maybe 20 of the parent or maybe we go um what would 30 look like 30 doesn't look so bad either so they're all just stacking like that one underneath the other and then these uh social icons inside will want to be larger so instead of changing both their width and height to pixels we'll just grab their parent which is the whole hero circle set a font size in pixels and now they're just going to stay um actually i may set that font size back to ems because i want them to scale down um with the social circles so maybe two amps and then now they're just kind of scaling like that and i may even add a bit more padding inside this maybe 12 pixels to space this apart a bit which one is this this is our h4 heading which we're also using up here and it's getting the difference the difference here isn't really working for us so let's increase the font size a bit so that way we have more contrast and that is going to look good there we're good here i may set the width and this to 11 pixels so it doesn't scale down and get too small um let's see how that looks or maybe instead of pixels we leave it em so it keeps to scale uh two ems though so that way it gets a bit wider um and that looks great there looks great here and on all our break points so let's go ahead and just preview and test it all out we preview we can open our menu close it we have our um our layouts all done here that's looking good we have all of our links here i mean increase the side padding um in this a little bit more and make sure when we scale down it still looks fine yeah maybe a little less because of the word shirts is a little long um that's looking good there and this section is all good we still have our sort of scroll interaction on those images you'll see they're moving at different speeds apart from each other and we still have this uh because we're using ems and we just increase the parent font size with ems uh these words should still fall in the exact same place on that interaction and all these look good here um and that's the site it's fully responsive from desktop on down we have a fully functioning mobile site with some nice interactions uh desktop tablet all the way through if you've enjoyed this video please hit that subscribe button below and i'll catch you in the next video goodbye

Channel: Timothy Ricks

Views: 7,516

Keywords: webflow, how to, tutorial, lesson, advanced, pro, course, building, design, development, interactions, animations, css, javascript, code, custom code, wizard, awards, interactive, figma, xd, adobe, convert, build, crash course, full tutorial, follow along, mobile responsive, responsive, webflow interactions

Id: wHz9Dp8UK1U

Length: 38min 32sec (2312 seconds)

Published: Fri May 07 2021