Building a custom slider in Webflow [Tutorial]

hey internets so welcome to the second video in this series where I look for dribble shots and make them come to life in web flow so I can continually practice my skills [Music] okay for this dribble shot we have wave and it's made by Alberto and yeah so this is what we're going to rebuild inside a web flow so the first thing we're gonna do is we're gonna break it down and then after that we're going to build it and then at the end we'll review everything that we've just done okay ready go so the breakdown now as you can see here it's three columns okay and we have some text here that's flipped we got some text here that's a h1 this is probably h2 this is a call to action it seems to be a slider I think and so we have a number one here so I'm guessing it's a slider and then we have the slider arrows here in here so I haven't seen a slider where the arrows are on completely different sides now if it's not meant to be a slider I'm not sure what it's meant to be but this is how I'm interpreting this static Mach okay and then we have a control right here for probably a video of some sort and then we have a menu so what I've been focusing on in this build is just a slider with some interactions and that's about it so let's get to it first thing I want to do is let me just drag this out so I have a reference on another screen okay so first thing I want to do is I have Webb float open already it's a blank page I haven't done anything yet okay there's no styles nothing it's just a blank page so based on the the mock it seems to be a hundred percent 100 percent height so I'm just gonna do that now with let's go ahead and bring in a slider and we're gonna make this slider gonna give it a class name of slider and give it a height of 100 VH okay so now it's a hundred and 100 good to go there all right and now it looks like now the mark shows that there's like waves on the left side of the three columns and I wanted to go a little bit further and make the waves more like real so I found some beach footage over at covered Co and let's go ahead and upload those so I'm gonna put that into my first slide right now I'm gonna drag in a background video okay as it's uploading it's gonna start transcoding and then after it's done transcoding I'll be able to see the video but I can still design as I go along alright so that's gonna be a background video let's try this I need to make three columns so how to make three columns is I can either use columns or flexbox and because I like flexpa flexible more and it's more flexible I can do that yeah what are we gonna do so let's go ahead and do this I'm gonna put a div block right here we're gonna call it flex and I'll put that inside of there and make this flex box mm so yeah I've never done this before make this slide 100% of its parent where is it supposed to be hundred eh let's try that so this flex right here supposed to be 100 VH cuz I want everything to be tall actually this mask also has to be 100% height so maybe I don't need the VH let's remove that yep I don't need the VH actually this one needs 100% though okay we're good all right so the reason why background video collapse is because it's yeah is because there's nothing inside of it it just acts as a div and so what I'm gonna do is I'm just gonna make it expand there we go we see our video pretty cool that's working all right next let's make this background video let's make it shrink but the basis will be 100 divided by 3 percent boom that's what I want and let's go ahead and add in two more divs so we got this one we're gonna call this Lex child 33 and then do the same thing 100 divided by 3 percent there we go okay so now that those flex child's like done I'm gonna say this one's the last one so I can put that that bar in the middle so I can say last and let's go ahead and put a bar so the border is left black or I need to make the body completely white so let's make the body tag white there we go okay so I forgot to do was the slider has a there we go a body background let's make that transparent okay cool so we're there so this is what it looks like so far good to go yeah that black that's just way too black and you just sit there passing beyond a bit I'm gonna say it's like 15 let me check that a little bit more you know it should be more than me less than 15 something like let's go 10 let's see what happens with 10 all right yeah that works actually 5 I know if I just got to keep going gotta keep playing with it right that's little enough yeah five is good there we go all right so the background video it also needs to be a height of 100 VH let's see what it looks like beautiful ooh nice here we go so we got that going ok and now on the left side actually with me yeah so on the left side what we got let's go ahead and let's put an overlay on top of that so we're gonna that's already position:relative awesome so let's go ahead and put in a div inside and this one is just gonna be absolute to the left on top we'll make the width say 50 pixels mmm but actually there's text inside so we'll start with 50 add some padding actually remove the 50 yeah so something like that and then there's padding on the top let's just make it let's make it 40 and then 20 on the sides nope yeah you know 20 on the sides see what happens just go with it let's put some text in here and I don't see the text where the text go okay it's right here put there there we go and we're gonna call this I'm gonna call this the beach okay so the range is called the beach and let me see can I rotate this let's see here rotated text okay let's see here rotate on the sea yeah we can right there that's good so we're gonna say negative 90 but it's is it centered inside of that thing it is okay cool so if I go like this it'll always be centered yep so yeah we'll do it yeah I guess we can go like that yeah that's fine push it down a bit more don't say 75 see what that looks like let's add a white background something like this we'll set it to 50 as you'll notice I like nothing I don't I don't like I like zeros and fives and even numbers and I'm weird like that I don't know if anyone else has that OCD ish kind of a thing but yeah that's me that's me all right so if I look at it right now cool we're getting there like it actually it's more I know it has a blur effect but I'm not sure if I can do that blur effect you know yeah actually let's try it let's try it you know why not can I put a background video inside of a background video you can well then okay so I just copy pasted that and put that in here and let's let's just make it small let's just make it really small with of like 50 the way did I copy okay let's delete that there you go so little with there we go I don't think it's this it'll be the same footage because it feel like this yeah it's repeating right here because what I'm trying to do is make this blurred so if I can go like this where is blur okay there you go so if I can no background blurred what I'm trying to do is if I set the filter to blur and opacity to something like this and I can get the effect kind of like what's in the dribble shot ya know so if I do this that let's set this on top yeah like that you know something like that but I would need some sort of white solid color on top I'll know I'm trying yeah that's not gonna work maybe I can go right here go back to the white and then set it down a bit but it doesn't look blurred where's my blurry background video oh wait I think I got it wait does this work yeah let's not try that for now let's just keep going and see where life takes us yeah all right I tried I tried everyone all right let's go to the next part okay let's add some text and so this text in this so this is flex and flex we're gonna set that to position:relative so I can go ahead and put some text inside and make it float on top so let's do this and call this slide content position:absolute and let's do some fun stuff mmm it seems to me like it's if I can do like do like 33% there we go probably oops probably right here somewhere around here is like 40% and then we need the absolute center so we'll go 50% down on that and then on the transform we'll go 50% up so negative 50 so now we're in the exact middle okay and easy part right here is just putting some content so all h1 so I'm going to remove your padding 3-0 and zero cool and we're gonna call it the beach and we have h2 or actually a paragraph so we're gonna set a paragraph and we're just gonna keep two lines of learn tips um and let's make this slide content the max width will be like five nope let's make it smaller so it goes 30% something like that and this Beach right here should be tall let's make it like 50 yeah let's go even more in 75 hmm and I think it's the font that's throwing me off right now so I'm gonna change that on the body tag right here yeah all the cool kids are using monserrate so I want to be cool too it's too light we came this h1 right here it's gonna keep it at that but the slide content let's make it bigger so I don't have that line break let's go 45 and this to make it more really responsive text let's do VW's okay so I'm gonna do like 10 V W there we go and then 8 V W so that way if I go like this nope let's bring that back okay so that way if I go like this see how the text is getting bigger and smaller yeah so that's responsive text using VH okay so the beach is this too big though is this going too far but it looks nice that big huh let's go let's go six like that and see what that looks like yeah that looks better like that cool nice noise alright so that was almost done okay did I set that anyway yeah okay so let's remove that class what just happened it's 6vw 60w there we go let's put some just a bit of padding under it like that yeah let's do it and let's get a link block and some text inside of it actually it looks like a text link so I'm just gonna use the regular text link right there and call it discover more right well not all links just this one so give it a name is text link display:inline-block remove the underline let's fix the color oh this needs to be a different color so we'll fix that later okay all uppercase make it bold semi bold there you go I feel like this needs to be taller or bigger right there there we go I wasn't playing I was in the wrong break point no let's fix that 7vw 7vw okay this one none three three all of those symma bold good to go and let's make a hover effect to make it simple just underline it boom just underlying simple all right so this Beach right here I think we need still put some space yeah there we go okay back to it this paragraph right here I'm thinking all paragraphs are going to be a lighter color so let's just take this color this default color and just drag down the opacity to like 50 so now we have some type hi our key happening right here and let's just make sure what's our max 4544 and let's go ahead and do some VW's as well here let's do um 2vw and see what happens you're way too big how about 0.75 look 101 1.5 yeah 1.5 oh this one could be too cool and the reason why I did that is because watch this but the paragraph and the paragraph and the each one are now responsive pretty cool okay I just wanted to do that alright next let's go ahead and there's this top part where it says like surf fan since 1999 so that's easy let's just go ahead and put some more slide content up in here okay so we're gonna call this slide content top and position:absolute it needs the same position so 40% from the out from the left side we're gonna do the same thing with the content top 40% from the left side so they're lined up push it down with some pixels probably like say 35 just eyeing it and that's it for that so easy put some text surf fans since and I'm not sure why you put a break there but I'll put a break $19.99 and let's so I content top I'm thinking it's semi bold at least medium and it's a smaller font size soaring we're gonna go with 12 and 18 all right and I don't know if I need mute sound because this is just a background video on web flow strips sound anyways and also the video from covered CEO doesn't have any so I don't think I need that okay and then lastly a menu and so I'm not gonna make a menu button I mean I'm not gonna make a real menu button but I'm just gonna yeah I'm just gonna make a fake one and so let's go ahead and do that link block right there and call this hamburguesa they spell that right okay let's just call it man you then all right set to position top right push it away let's go for what am I doing here what are we doing here this is 35 okay so here I'm just gonna say 35 and 35 right there cool and let's go ahead and put text inside of it and put menu and yeah let's just use that same text link and why does that have a oh because I need to remove a move class and let's add it to menu so text link it's taking that global class here we are so far cool all right okay so the reason why I can't hover over menus because this right arrow in the slider component is on top of that menu thing so just got to keep working at it all right next thing I want to do is uh yeah let's get let's get these arrows under control so the left arrow is supposed to be somewhere around here and the right arrow is supposed to be somewhere down here interesting design so let me challenge myself to get there so let's go okay so this left arrow is already position:absolute so let's go ahead and figure out how we can put it there let's start from the top right interesting that it stops there I wonder why well let's just keep going and see what happens okay so if that left arrow stops there how can i push it okay seems to be working okay and I can see here can I change this this icon icon change the color because SVG yep so you know three three three there we go so now I can see it better where I'm at and oh it's because it has these these are here take those off all right what just happened so I did that and then strange okay so the height of this should be Auto or yeah it shouldn't go down see you know Auto yes that's what I want okay let's see if I can awesome okay so if I just do this I think I should be fine does this icon not have a width or something or interesting can i still hover yeah I still can hover over this alright let's fix that just my eyes are that icon not yeah it's not three two three there you go all right cool getting closer so let's make this icon actually smaller Oh interesting I think it's like let's go 16 22 yeah and right here we don't need that much padding whoa all right now uh so here we go this left arrow is way too big yeah so let's it's made smaller lit like something like that okay and let's push it down by 35 probably like right there I'm 30 let's get this off right here now I'm not sure if it's gonna follow it yeah it's not because I need to use percentages so negative let's see let's start negative 33 33 percent okay so that's good well keep it here so everything stays yeah like it but I think the arrow needs to be pushed down just a wee bit more okay cool let's do that I'm kind of happy with that let's keep going right side right arrow so this right arrow let's go ahead and set the height to Otto boom I said boom interesting okay let's set it to bottom right like this wonder why it's doing that again is it because of these let me zero this out yep maybe that's why this right here nope zero those out too okay well then why is that going all the way oh because of this there it is I got it okay we'll do the same thing right here and now let's push it positive 33% fix it a bit there you go and let's give it 35 we're so there's gonna be more content so I'm guessing we keep it like that yeah you know let's keep it like that alright next thing there's a FAQ and help button or links so we can just so that's menu let's go ahead and get another text link I should have done text link here but yeah that's okay that's the same thing right actually this should be outside of the slider huh I wonder is the slider position:relative it is sweet so here we go for organizational purposes I'm gonna put that menu there and this link right here good to go all right cool so this right here we're gonna call it actually we need two of those so I'm going to copy paste we have two of those and we want to group them together inside of a div block okay and we're gonna call this bottom links and this is what's gonna anchor it down to the bottom right and what did we do with you we did 35 from the bottom so that's we're gonna do up the slide nav let's slip the slide enough to hidden because I don't I don't need it they're just dots okay so that's three five nice all right let's set 35 from the right and it's lined up with the menu at the top there beautiful all right looks like these are conflicting with this so let's make sure that these are on top by using a z-index of one and so i'm setting that to the higher class name that's what that buttons for and then these bottom links set the z-index to one and that didn't work awesome why this is the mask on one Oh the mask is defaulted on one so let's go ahead and set these to two then set the two set to two there we go all right let's fix these this one is gonna say FAQ this one is going to say help and interesting that these links aren't learnt all caps well at least help is in all caps but I'm gonna go for consistency and keep them all caps so I can use the same class names and I'm just gonna call this one help so I can push that away from the FAQ wait all of them need to be display:inline there we go I mean display:inline-block I think there's like probably like 1520 yeah it's 20 pixels away all right cool and yeah there we go almost done with the first slide okay so far so good okay all right all right all right last part is that one weird tab thing that I'm guessing it's a timer so let's go ahead and fix that or actually not fix add that add that all right there we go where we going where we going let's go ahead and actually let's put this for organizational purposes get this out of the Flex box it doesn't need to be there okay we're still good so the Flex box is just handling those three columns while all the floaty things are right here cool cool all right so let's go ahead and do that that thing that black box thing and this is a floaty thing so let's leave it outside of flex and we're going to call it slide number wrapper and this one's going to position bottom-left let's use percentages so we're gonna start with 33 and work our way down I think it starts right here and then it has a width of like insane the 33 you know can't see it so you'll see a 25% and let's go ahead and right there add some padding make the background something like that there you go and set the z-index to 2 now it's on top of everything alright and let's go ahead and we're gonna set this to flex because I want them all in one row and I want them centered vertically let's go ahead and put some text in here and this is gonna be number 1 it's going to set the color of this to white the text color to white there you go now let's make the text big let's go for oh wow did I set a height to this I did not just think oh is it because of my line height hmm maybe let's go with that but let's give more padding to the top and bottom say 40 okay we won't warn the sides probably 30 yeah something like that and lastly let's go ahead and fix this yeah it was the line height that was causing that yeah so something like that alright and now let's go ahead and put this right here and we're gonna call this progress or a timer bar because later I'm going to animate it so it actually is a timer okay so let's push that away from the number one let's go with 20 and set the height to 1 and since it's a flex item we're gonna expand it so the height is actually you know it's not one it's like three right and we'll set this to like a light color all right cool and now inside of the timer Barbara are gonna have actual actually let's make this time bar wrapper and then the real timer bar is this right here all right timer bar and we're gonna set this with two we'll start it it's because so we can see it will start at 50% and set the height to 3 pixels just like its wrapper okay and then we'll go ahead and set the background to white and so it looks a little bit like this cool without animating or doing anything it works so if I go like this kind of works okay so we have two slides but this is not how I want it I want it to do like a crossfade or something right so little bit of the settings for like let's see how I'm doing my slide settings there we go so animation type um let's just do a crossfade so if we go like this that looks better cool you know what these needs some I think these needs some sort of hover effect real quick it's not interactive it there's no hovers just saying so let's go ahead and push this to the you know let's go 5 pixels and then on the off-state it goes back and then we need to animate it by using transform and so there we go and then here it's gonna do the opposite let's go ahead and set a timer to transform and our hover state is going to be negative 5 and so there we go I said there we go what happened there you go see how it works but why no working huh okay okay there we go okay there we go okay cool all right now we're going to set this to autoplay so let's go back to my slider settings and we're going to autoplay okay so the timer delay is that 4,000 milliseconds so I'm going to have to do that with the animation too so let's go ahead and create an animation see what happens all right so I'm going to go to my animations right here element trigger I should see a slider let's see your face it's like slider do I see anything no I think it's on this I click on slide there we go we have slider alright so when the slider comes into view that means once I start seeing this slide starting animation there press + and we're gonna call this slide timer and I'm gonna select this timer bar right here this little one and let's go ahead and do a size so the size initial state is gonna start at 1% okay and then we're going to do another size but this one is gonna take 4 seconds and the width is going to be 100% so after 4 seconds show it so watch this if you can see it down there it's growing and then boom that right when that happens that's when things need to go away I mean that's when we do the crossfade okay and so what I can also do is this one this whole wrapper thing probably goes down and come back up and shows the number 2 okay but I don't have that yet so let's just make it go down and see what happens so this slider right here move initial state is just gonna be where it's at right now at 0 and then let's see what I can do is timer bar actually let's make the timer bar 3 seconds at 3.5 seconds okay and then at 3.5 seconds this slider bar wrapper so I'm gonna move is also gonna be at 0 yen actually let's delete that okay so it's gonna start it zero and then move down 100% so it's just gonna slide down like this two hundred percent right cool and so let's see what that looks like so it's gonna three point five seconds and then boom it goes down cool and let's fix that using that's easy needs to be like better linear just linear all right you undid there we go cool so we're gonna do that and then let's see here when slider is out of view I think it was that happens when things are out of you I don't need that alright let's just see what happens okay preview okay 3.5 go down switch to the next one wait for seconds show me the next one oh wait up by itself did that go faster or yeah four seconds just fast one time twenty thousand three thousand four one thousand okay there we go okay cool so it actually did it on its own that's pretty interesting okay so when the slider is out of view though let's start animation it's not really animation it's just like hey this thing need that timer bar needs to go back down so lemme timer bar reset needs to reset back to zero percent so let's go to timer bar set the size to one percent set the duration to zero and there we go so let's go see what happens okay alright okay one one thousand two one thousand three one thousand four and there we go and so now I gotta do is let's go ahead and finish this up so what I can do is I can just copy this slide and paste it boom okay so I can delete that and just let's call this here can i double click this content Oh slide content right here how come I can't hello slide content oh it's because there we go and then this will be relaxing chillax chillax um something like that a little beat this is slide - yeah and then let's see here discover Marvel just leave that everything will just leave a life is the only thing will change though is this background video that's what I can do is replace it okay so it's uploading for this one but it's not uploading for this one this one is stays as is what this one right here is now transcoding so it's gonna switch let's go ahead and new Beach okay and let's see here let's wait for that to finish up transcoding so with the power of editing it'll be done done all right cool so we have this going on and let's go ahead and set that to 0-2 and this slide has the same ailment trigger but let's fix these okay so this timer bar is not on the selected element but the class with only children with this class so children within the slide okay so it's within that if I go like this is the same thing I'll just need to add that so it's a class children cool so now I can set this to s number one yeah cool so let's see what happens mm-hmm crossfade okay cool so that's cool and all but yeah it should go up so I'm guessing yeah oh and then didn't reset did I set a reset on that one let's go look so this slide right here should have a reset oh I didn't do Yeah right here it's like you know I'm in class there you go okay so that one resets it and with the reset so hold let's see here this here well when the slider is in view the slider bar goes back up to zero and goes down and then okay so let's do this when the slider is not in view we're just instead of time I've already said we're just gonna call this reset this fella right here should move down okay so let's go ahead and set that to a hundred percent okay and this is for all of them and let's see what happens so we're starting at to go down show me one then show me to cool and now we can just have even more fun you know like what happens on this one right here when it shows up you know like this probably slides in or saw my own oh no let's move it to the initial state and set the X to negative one hundred percent so it goes to the left and then at actually no I should we'll start yeah we'll start here and then let's add a new timer thing so it moves one hundred to zero percent like that with the ease out court and it just goes like that yeah cool and then we could just add me as much as we want now let me close this out because I want to give that a name I don't want to just call it div blog don't call it's um left thingy huh all right so let's go back to my slide right here animation so left thingy set that the class right there so left thingy so play yeah I'm not seeing it because I'm not on this slide there we go let's try it again there you go timer still works okay cool so let's go ahead and choose some other stuff to play with right so you have a content top and let's just move that to here move to negative one hundred percent so it goes up and right here let's go ahead and move it to zero actually right here and this happens let's say a delay of like 0.15 and it's out court and yeah we can do the same thing I'll set the move to 0% see what happens on this timer bar right here these have to be 4 these both have to start at 3.5 right so has to start 3.5 with this so these have a delay of 3.5 so that way this lighter number actually happens in there we go okay interesting so this top right here this cannot have a delay but duration of this has to be 3.5 and this right here yep that's exactly what I want see how it ends at 4 seconds boom cool so we can do whatever you want with this slide the top and so let's add another one set that to opacity zero and let's go ahead and set that opacity to 100 but this happens with this so so good okay and we got to make sure that we're using the class names make sure they're all paintbrushes all right like that cool and let's do one more just for fun let's do this set that again to move let's go negative 75 but no way I'll have to go high so negative oh it's because we're using let's see here it's because we're right here we're using this transform as well so I'm gonna move it up as a percentage all right just I'm gonna go here back at it this has to be percentage so negative 40% it's going negative 100% yeah do you like that and this happens to the classes and then let's go ahead and move it without court and negative 50% so it's back in the center okay and one more thing the opacity when you set that to zero and set it to 100 right here with out court and there we go and these two right here slide content let's have them with a delay of like 0.25 all right there we go so animated three things and then our fourth thing shows up and there we go so let's see here what just happened with everything why you so slow why okay so you're supposed to be putting slider right here okay so slider here and it's a slide timer and it's just the timer bar what is this slide number wrapper and slide them a wrapper oh I set the move to okay so let's go ahead and it should be it should be zero right there should be 0.5 okay let's see okay go down come up there we go why did that flash away what is that flash away I think it's flashing away on the on the reset so move is supposed to be oh it's because of this slight in view I set the slider rapper it's supposed to be five okay and then it moves to 100 down okay and so the slider reset this is not initial State this is see here that's exactly what I want but this is gonna flash away I wonder only children with this class exactly well my point so I wonder if something's happening is slider rapper right here it's going down come on now show me there we go so it's going down now it goes back to slide one okay fine show me show me slider rapper okay well it's not showing it so okay uh ooh I think that's it I think I need to figure it out but I don't want to hold you guys too long so maybe I'm supposed to put when it's out of view it's supposed to you know me just add another thing and see what happens let's see your move right there and we'll set the duration to zero yeah because its initial state sorry and then the Y is zero percent it goes 200 what see what happens okay I don't like that go away come back go away come back hmm I guess it's something I need to figure out and I'll probably figure it out and add to this video but for now I'm going to end it okay so day two with this thing and I figured out what was wrong okay so if I go to my back to my interactions I go to this slide so what I've done is I've removed this slider wrapper thing right here I removed it from sliding down when you see when the timer is done okay and I moved that over to the slider out of view on the reset I just let it move down right here so if you can see here moves down and the other one comes up right away so that one moves down comes up right away and so now all I have to do is start doing the reset on these for example this left thingy right here I set that to go to negative 100 okay so it's off the canvas and I can do the same thing with all the other stuff like if I go to let's say this one slide content top let's go ahead and push that to the top say negative 100 no negative 100% there we go and also let's go ahead and set that to class there you go I'm gonna set that to court let's also do opacity as well so what the opacity to go away same easing cool and then is there anything else we need to do oh yeah this one right here let's go ahead and reset that one as well move that up or no we can move this down say 50 pixels you know something like it's too much 50 is it 25 well do 25 set that to class children court and then do the same exact thing for the opacity that's already set court in zero and I think this does it let's see okay okay so I started from the top so it starts to the top so okay so what I got to do is let's change the let's change the reset actually right here we can do slide content where does it start from it starts or you can't see it goes it starts in the top and so what I can do is see here let me try to investigate this so it goes down I like I want it to go down and then down again and then down and then down again so what if these guys are here the slide content goes down again let's actually goes back to the top so let's move it to negative 100 percent okay and then yeah let's see what happens okay go down okay that's what I want one more time yeah that's cool okay let's let's get more a little bit funky with this they're all happening at the same time so let's let's add some delay so this content let's let's start with the left thing so the left thingy goes first I want the left thingy and then the top content these guys let's set the delay to like 1.25 and then these right here would have a delay of 0.25 0.15 and point 1 to 5 so let's see here okay see they're happening yes different times okay I mean I can play with timing as much as I want but there we go a custom slider based off of a dribble shot and we're done so yeah thanks for watching if you liked this video please hit subscribe if you have any comments about it please leave it below and as always make the web beautiful see ya

Channel: pixelgeek

Views: 33,908

Keywords: webflow, graphic design, web designer, content management system, web design, how to, webflow tutorial, responsive web design, inspire, learn, webflow slider, design, ux design, web development, pixelgeek, custom slider, pixel geek

Id: _QAkUek41Vk

Length: 56min 58sec (3418 seconds)

Published: Wed Jun 27 2018