Custom Webflow Tabs with interactions - Stream Clip

Paul sent me this and said hello Nelson I know that you like a challenge I wonder if you can reproduce this slider in web flow without code and um at first I thought well this is what he's talking about that goes so this is what I'm talking about who are he is talking about and it's this and at first I thought oh wait it's not a slider it's a tabs but then right before the stream I was like oh wait yeah you should do it in a slider but I'll show tabs first so we'll show I'll show you how to create this as a tab using the tab component and then if we have time I'll recreate it as a slider but the main point I want to show you is that with web flow tabs you can add an interaction so this is the small little action you know small little interaction that will do okay a little masking effect and I haven't practiced this so I'm just gonna go in it first try and that's what I like to do anyways and let's see here someone already tou bought me a coffee thank you so much tio and hold on oh yeah tio and Carlene thank you so much for the coffee let's get to it and Kevin Kevin you rock alright so let's do this inside of web flow recreating this actually here let me break this down I see that we have two columns one two so that's gonna be easy it's gonna be a tab component and so tab components gives you the tab menu and tab panel so this will be my tab menu and my tab panel and instead of having tab menu at the top and tab panel at the bottom I'm gonna put them side-by-side probably using grid not flexbox this part is gonna be hard because you cannot put hmm you cannot put extra elements inside of the tab menu row but now my mind is thinking if I use grid can hmmm gonna be hard if I use grid can I have a grid cell here can I have like a 2x2 grid and this is Row 1 column 1 this is row or column 2 and this spans two rows and this is column 1 Row 2 is that possible oh no we'll do this part last because that's just Flair all right let's go greenie come on stream quality just dropped no I don't see any drop frames connection is still excellent refresh the page refresh YouTube page if it's not good all right let's go let me put in let's put in a div and we'll call this container max width eleven hundred pixels spacing centered cool let's just add some margin to the top just for funsies normal is doing well sorry everyone alright now we have a container let's go ahead and put in the tabs we got tabs cool and so what is tabs what webflow tabs is a way to just have different content on top of each other but they don't show up until you actually click on a tab so it's doing a hide show so right now we're hiding tab 2 & 3 but when we go to the different tabs it'll show the different tab content based on the tab that you're selected on all right super simple web flow gives you overall wrapper the tabs mint or overall wrapper tabs then you have a row for your tabs menu and in this tabs menu you cannot add anything else inside of it so if I try to put in text what flows like nope only tab links and it's like DOM and if I try to put it right here nope only tab things can be inside of a tabs component all right so that's what's happening there tab pane that's where you put your tab content inside so let's go ahead and style this so I want to try to do that so again it's two columns and then we have some stuff okay so let's take this tabs and make it two columns simple great cool and I notice something's going on right here so why is this usually when there's a blank space like that I'm thinking it's because there's some sort of like float happening float and clear there is none interesting I guess you can't use grid with this huh let me try again let me force the float and click the float to be nun nun and then try grid again No look at that this goes here when I wanted it to be here not good okay well that's fine I'm gonna go back to tabs and we have to use flex that's fine let's go ahead and make this tabs wrapper 100% with just to make sure okay and this tabs content let's go ahead and grow it so we want to expand it the whole way in this tabs menu right here since we're doing a vertical we can set this to flex vertical and there we go let's give this a whiff of I don't know 300 that seems about right and let's go ahead and also add some margin on the side let's say 42 cool so we're almost there see we have this actually there's a lot of space yeah okay no we'll just do that cool all right now that we have that let's go ahead and name our stuff so we have 0 1 enjoy vitality so we have a number and name so let's go ahead can I add another text block inside of here yes I can I like that okay cool so this will be our number so 0 1 and I'm gonna give a class name of tab number and this one right here we're gonna call it tab label and let's just do the same thing so this is going to be actually can I delete these two wanna weep uh-huh sweet so instead of having to do the same thing over and over I can just copy and paste it there we go so this is 2 and this is we're just gonna do 3 and the photos I'm using already uploaded it just to celebrate the upcoming was it May 27th I think or or somewhere around there last week of May the crew dragon first time with actual astronauts inside of it is going to launch from Cape Canaveral so that's that's interesting so let's see here let's put Bob Doug and then the next image under put through dragging UI and through dragon in space cool all right so we have those things and we want to make sure that they're on the same line so what we can do is we can do either two things we can do one set each tab link to be flexed so they're on the same line or set each the tab number and the tab label to be display:inline either way you want to get them into one row the reason why they're in two different rows is because this tab number and this tab label they have display block which means as it says right there block elements take up the whole width so it gets its own row so let's try the first way display layout right there flanks now fYI if you're playing with tabs and you style the first component of the first tab button it's going to do this that says current that means your this is the style you're setting for the element that's currently selected I would strongly advise not to do that instead I did a undo fanzi instead go to one of your unselected tabs and give it a class name tab tab link and then set that to whatever style you want okay so that way it doesn't have the current okay so we're styling this one first and then we're going to apply this same selector to the other ones alright so those are flex and I want to make sure that they're aligned vertically themselves and then tab number let's make that a little bit smaller actually no will make the let me let's see here okay I want let's change the font Ariel's old school I'm gonna change the font by going back all the way to body and setting the font to that one Monserrat cool I'm gonna click back and now we're back on tab number and let's set this to semi bold semi semi and then tab label let's move that away from the number there we go to 216 and this one we're gonna make it a little bit bigger nice and we'll go ahead and set that weight that's okay cool that's thin so let's make this thin yeah we'll make it light we'll make it bigger all right and I like to use dashes for my line height so like 1.3 - there you go it's a trick that I learned from Ryan the our lead brand designer over our web flow all right and this tab link little squished so let's make it less squished yay and we don't need a background so let's set it to transparent there we go now let's see here what else okay so the text actually is gray it's like light so what I'm gonna do is ooh we need to add an interaction to this you there's three lightning bolts and hold on Eli Mike have a better solution to this Eli you can set the font color to the tab link to 333 with opacity 50% and 100 on tab link maybe that's the easier way Eli but wouldn't oh yeah maybe Eli is ways better let me try that Thank You Eli so hold on let me remove this but still you can keep that knowledge but let me see let me see here he's saying that tab links tab links color will be 50% font color is gonna be 50% but this tab number will always be a hundred percent oh that was so much easier Thank You Eli learning and then on tab link hover you can set this to hunt yeah so much easier would Thank You Eli and then back on none back on the none state the transitions could be TechEd font color 200 milliseconds and we're done that was so much easier Thank You Eli so this makes this part easier for current just make sure that the font color is a hundred and we're done okay you and Eli I've made it too complicated okay so when I do a stream clip I'm gonna make sure to remove all the stuff that they talked about yay okay so that parts done thanks to you I now let's go ahead and put our images so let me see how they did it okay so we have image inside of there some content and then a number that we have to rotate so let's go ahead and do that the tab pane let's go ahead and just add some padding 42 on all sides give it a background color cool something like that and let's make it a little bit cooler like a border at the top wait a sec blue oh nevermind mm-hmm I'm just playing around right now real quick okay just something just something to add all right so Bob and Doug Godspeed wait no yeah right hand yes and some text and I tweeted this out a while ago can someone please make a onesie of this suit a pajama onesie I will buy it in a heartbeat all right so I'm gonna call this tab pain instead of tab pain one because I'm going to set the same class to all of them gonna Center this make the text bigger three dash and tab I mean image cuz I want to push this image down or give it some margin there we go cool oh one more thing these need to be like vertically aligned so let me make sure to go to tabs and vertically align them there we go and now what I can do is I can just copy and paste this into each pane and then give each pane the same class name sweet and then for pant replace this image with the last one and call this a true dragon loading cool and then go to tab 2 and this one will be training with the crew and you I also I want that helmet oh my god I one day if I ever get that helmet I will wear it for a stream and pretend like it's just another day John welcome to the stream John thank you so much for the coffee yeah no you're not late marine from Texas who is in Florida welcome back alright so doing tabs alright so we're back here ok so we have our tab set up pretty cool with the tabs there's extra sub there's extra settings you can do so right now the tabs do a complete fade in or a fade in and fade out ok and you can see right here fade in and fade out and how long it takes okay so if I preview fade in fade out fade in fade out I mean they'd out fit in they doubt fade in ok but what if I just want to flip them so if you look here they just they don't do the fade they just flip so you can just set the fake timing to be 0 boom both 0 and there we go we've removed that crossfade cool all right now let's add that number let's go ahead and add that number to the top left it's gonna go my tab pane and put a text block right here zero-one and now let's give this a class name of I don't know slide number or no pain number this isn't a slider now because this tab pane by default web flow sets it by default sets the position as relative I can set elements within it to be absolute and so when I set this absolute it will target the tab pane and it says body let me go here and force it okay now it says tab pane alright so you have to force it but actually it it already did it but web flows you are okay it's pointing to tapping I want to go to the top left so we use this right here push it down a bit let's push it the corner oh there's some masking issues roof all right well let's see let's see if I can mess with it mm I'm thinking so my first thought is do I set the overflow to visible would that break anything oh it didn't okay sweet so what I did was this tabs content right here it by default has overflow:hidden this means that if I move anything outside of it so let me make this bigger make this bold and so if I move this the index on top there you go if I move this outside I can't see it however if I go two tabs content which has the overflow:hidden and set it to visible now I can so now I can do that overlapping stuff all right so last thing so what I did was set it to position:absolute put it to the top left and then play around with the position and then z-index I set it to one so that way I want to make sure that it's on top of everything because all the others index is by default are zero and now I'm going to go here to transforms and set the rotate and on the Z I can play around with it and there we go so I'm going to set this to negative 90 and that's something like that right yeah let's make it bigger yeah that's cool a system one cool um moving this around and let's push this down a bit ooh how that lines up I don't think that will happen let's all the time let's make it pixel perfect right there so 46 oh that's cool yeah that's cool okay and let's move this away there we go there we go cool so we have that and let's just copy and paste this into each tab pane and this one will be number two this one will be number three nice let's take a look cool simple you know tab pain after that now we need to do this little masking effect so again a lot of people don't know but you can do interactions with tabs so let's go and do that tab pane or t-pain I'm just trying to be funny here we go so I'm going to click on tab pane and then interactions and if I press plus I should be able to click tab change select a tab element to chew this is a tab element you see here tabs content what okay tab link okay I got to tell this to the web flow team but in order to see this trigger in in order to enable that trigger it shouldn't say you need to click on a tab element it shouldn't say that it should say select a tab link in order to use this trigger so that's what it is so I'm gonna click on tab link press + and then tab change okay and as you notice you can also add interactions to when the when a drop down component opens or when a nav bar opens or when a slide or changes slides so this one's tab change alright here one seems to be pleased differently okay so tab in view so when tab one is in view what should I do so I'm going to start animation okay I don't think I set this up correctly no I didn't because I need some sort of I need some sort of masking effect hold on I'm thinking this is probably within another div that grows okay yeah let me set this up so we have our tab panes but we need to wrap this in another div because it needs to have some sort of masking effect all right so the masking is basically overflow:hidden so I'm gonna bring in a div block and I'm going to call this tab pane number wrapper this is going to be position:absolute to the top left and look from the top it'll be sixty-two pixels and it'll also be like some around somewhere around here negative five percent I'm gonna give the width and height and that exact pixel number let's say 62 and the height will be 70 maybe 80 okay there we go and for this pane number I'm gonna bring it inside of tab pane wrapper and set this and remove my position:absolute so now it's inside of here now why did I do that it's because when I do overflow:hidden watch what happens when I set the width of something smaller see the number it cuts off it's like we're cropping it but there's also a problem I see see how the number is moving to fix that I'm guessing the pain number also has to be position:absolute and set to the top left of the wrapper okay okay there we go okay cool so that's what I want I want the tab pain to do this thing okay yeah okay so the tab pain is gonna do this but what I'm thinking is it's not really gonna work because watch when I go off of it it does this effect but then it does this roof this got more tricky oh man because we can go one way like I can go from zero to 80 and it'll do that but how do I get that other side the left side over to the right do I move it no I can't move on the transform because if I move it both of them moves can ice no no do I have to do two rappers in one maybe hold on wow I'm gonna like not talk for a second and see if this works and if it does work then I'm gonna tell you what I think I figured out okay no I wanted to play that but I want percent oh okay no this one is going to this so this one simple but then this pain you have to mask that's what I'm thinking Matt but I don't want that to move stay there man I feel like Bob and Doug are laughing at me right now for like huh he can't figure it out look at him struggle hmm why it would be completely hacky no it would be completely hacky if I moved this at the same time this is moving as well so kind of stick so they're kind of like going like this that just seems bad though pad Mountain pain number absolutely yeah it's already set to absolute maybe I can figure it out off stream figure it out off stream man one day I'll figure it out but for now we're just gonna do this one just gonna eat at me all weekend all right so back at it I'm probably gonna start the clip again here but tab link element trigger we've added a tab change and so we're gonna create an animation a new one so plus and we're gonna call it tab change in view you can name it whatever you want and we're going to select tab pane number wrapper press plus and the size is going to be the initial state the width is going to be zero zero pixels so 0px and then the end state is going to be eighty we'll set this to ease preview and that's what we want no we don't play with like you know cubic feel like it did nothing mmm seems the same whatever okay so that's what we want and done and so when I tap out of you you know when we tab out of you you know start animation and plus tab change out of you this pain is gonna go back to zero pixels and the duration is gonna be zero because we're flipping the tab immediately so we're not gonna see any animation happen so we can just set it back to zero okay I'm gonna press done and this tab changed things gonna happen to all the tab links so now each of them have that lightning bolt and if I press preview it doesn't work because I need the tab pane wrapper number wrapper and I'll breathe em have number rapper you in there no campaign rapper put you in there it's just double check so you're it ooh ooh I guess these need to be taller and the pain 0% pain numbers need to be out smiley there we go me teen let's check this check this okay cool now we see them huh huh let's check our interaction your action oh there's my problem so what's happening is I'm affecting all elements with this same class it shouldn't be that it should be only move yeah it's not even a child so I have to set combo classes to each of these number rappers because what's happening is this interaction is happening to all of them so I have to give them combo classes so this one is number one this one give it a combo class is number two this one is number three and of course if you have questions or you're getting confused I want to help you out let me know if I've confused you already I'm sorry alright so this one right here should be tab number upper one done and I'm gonna set this just to element because we have to do this three times this is not a fun way to do it but let's just see if it works yeah you have to do it three times or as many tabs as you have off that's not cool all right well do it um mouse on tab change start animation and this is in view I mean it's not hard to do but it's like I guess all right we're done with the second one little the third tab change start animation duplicate the in view change the class name to be whatever number the combo class is duplicate and change this number to 3 here we go all right we struggled together but we got there now it looks like they're giving me a smile of approval so thank you Bob and Doug but yeah tabs you can add interactions Adi saying greetings from Armenia hi really love the work that you do thank you so much my question is how do you optimize tabs for mobile ooh I want taking this one great question let's go how does this look in mobile so desktop looks good tablet not so much so let's set this since we're using flexbox let's set this the vertical all right they approve let's go ahead and set this container going up and go so we have this right here if we go here we're still good they're still good but what if you have a lot of stuff like you know and then you have this big long menu you have this big long menu and then when you click if you like if like say this is say this is like the contents down here if I click and then the phone screen is like this tall it's like okay click but what's actually happening so there's a trick that I learned I forgot I gotta find this tutorial but I was like oh yeah ah that's really cool um you can actually make this into a drop-down with interactions so let's go through it let's do it yes let's delete some of these from real quick actually let's just keep it those three good good yeah we'll start from this breakpoint tabs content cool right and this tabs menu will set that to auto so it's a full with I said full with oh right here zero that out ok cool there we go that's what I want padding 42 so it's the same yeah that's what I want okay so all my tab links um how did the person do it hold on hold on I'm thinking aha there we go so we're basically doing like an accordion thing okay so let me go here and add another thing let's add a button okay and this button is gonna go on top of tabs and let's wrap this button in another div so that way I can give this a padding 42 as well and then this button text is going to be display:block so it takes a pull row open tabs menu that there they're just styling it real quick nope that's not what I want that's what I want alright so open tabs menu we're gonna toggle tabs menu okay so this when I click on this we show tabs we show tabs menu when I click on this again we hide the tabs menu okay but we can animate it okay so it looks like a drop-down menu okay so with this tabs menu I've set the overflow to hidden and let me double check something and I'm gonna set this position to be absolute and set the z-index on top and let's go ahead and make the tabs link let's give them a background color because background color yeah so they're on top as well as the current one it needs a background color there we go okay so this is the index it's one and it's competing with this one so that's one as well someone wanted to make this higher set it to two and there we go all right so we have this set up what I did was the tab menu set to absolute ZX is higher than everything else but overflow is hidden what's gonna happen is when before I click on tabs menu the height is gonna be zero but when I click on the tabs menu it's gonna animate to auto its gonna animate to auto so it's gonna open up like this all right and when I click on tabs menu button again at the top it's gonna animate down to zero so it's kind of like a drop-down menu but it's actually a tabs menu all right so let's go ahead and do this keeping it as auto for now tabs link nope that's not want so this button right here so this button I'm gonna click on interaction mouse click so on first click start animation I'm gonna click on this and call it mobile tab menu open we're going to effect tabs menu we're going to set the size as initial state right here and set the height to zero boom all right and for my ending state I'm gonna set the size to have ease out and set the height to auto and there we go pretty cool now we just do the opposite we set it back to zero done and then on second click start animation plus actually you know I should have duplicated home delete duplicate and call this tab menu closed delete the end state and set this first state as not initial give it the ease in and set the height to zero and there we go but we're not done because if I click on this then that means that the user has to click on this just to see what they're going towards I mean what they they've selected so on these tab links so if I click on a tab link press plus and mouse click I can go on first click start animation tab menu close however I only want this to happen on phone landscape and phone portraits so I'm going to uncheck those and there we go so if I preview oh I didn't set it to all I did set it all what oh no I did it just on the first one mouse click set the class there we go and there we go now I'm noticing if I click on one of these the tap in you have to click it twice just to open it so I think that's something I got to figure out but I mean we're halfway there ooh and this shouldn't show up on desktop so tabs so this right here is set to display:none this one right here that's fine and this one display:block hmm a couple of things I gotta figure out you know great question thank you for the challenge I need to figure that last part out

Channel: pixelgeek

Views: 5,226

Keywords: webflow tabs responsive, web development, graphic design, web design, web design tutorial, pixel geek, webflow tutorial, how to, website design, responsive web design, webflow tabs, webflow tutorial 2020, css tutorial, css tutorial 2020, tutorial 2020, how to webflow

Id: WDUWSBjOcOw

Length: 49min 16sec (2956 seconds)

Published: Wed May 20 2020