Building a VERTICAL SLIDER in Webflow | NoCode Tribe

hey guys what's up then hear from the coach welcome in today's video I'm gonna show you how to build this vertical slider using the styler component and web for interactions so this tutorial is going to be a little bit more advanced than the others because it's a pretty complex component but if you follow the tutorial step by step you'll get to learn how to build this vertical Snyder okay let's get started quick reminder as usual before we start this tutorial if you want to visit the live preview of this vertical slider or clone 8 in your web flow dashboard I put the links in description so go check it out now Before we jump into web flow let's first have a look at what's going on when I play with this slider so this vertical slider is really a component I love because the user experience is is great the design is great it looks it looks really beautiful so half of the page is the image and half of the page is the texts or link I mean title of the text and and the link so yeah it's really modern and smooth design so I really like it alright let's jump into web flow so as usual as I divided my project in two parts so here's the top part is the template which is the finished slider and the bottom part here is when I'm gonna rebuild this this vertical Sider all right let's start with the structure of the template so in this this template we start with a container inside this container I have to Dave blocks one is the slider wrapper so it's half of my page here the containing the images it's the slider and the second wrapper is the second half of my of my page which is the text so title text and link so I called it the content wrapper so in the first the first rapper the spider also I have a slider component which contains those elements or the mask where you can find the slides and to a left arrow right arrow and the slide domination in those slides I put here a div block which is the background image and so each is just slide contains the div block with the background image so that's it for the slider wrapper and in the content wrapper I have three diff blocks which contains title text block and a link so this text wrapper it's actually here the content for each slide so I have three slides so three text wrapper alright let's rebuild this in my new area here so I start with a deep block container so let's go get a deep block okay and inside this day block I have two other deep blocks so I'm going to select here this day block copy paste and drag it inside this one and then copy paste a second time so I have not too deep rocks in my first dip block here I have a slider component so I'm gonna get this slider component at the bottom here on the element panel so here's my slider so the this Devo default slider webflow slider it contains the mask two arrows and the slide nav so basically I have all those elements here already already in my in my part here I just need to add the background image deep block so I'm gonna go in the mask here slide one and I want to add a div block which is going to contain my background image so actually this slide two here I can delete and and I'm gonna build the first slide and then copy paste two other times to get three slides because if you look at here the structure of those this slider is the same three times the same it's just a different image and and I'm tree I'm gonna do exactly the same with the with the content to save some time so this is for the content for the slider wrapper this one here so the sticking wrapper is the content wrapper so I need a deep block here with an h2 a text block and a link so I'm going to take this one here and I need another div block which contains at an h2 a tight text block so h2 which is a heading here h2 and a text block here is a text block and this link here is actually a link which is available in my free UI kit here so it's a link with with an interaction already built on the arrow so what I'm going to do is just copy paste it from the UI kit so if you interested on how to build this link I already put I already recorded a video on my youtube channel so I'll put the link in the description so I'm just gonna so I'm here in my UI kit I'm going to copy and selectively my div block and paste here my link okay so now this text wrapper here I'm gonna I'm not going to build I'm not gonna appear at those other two ones because first I'm gonna build the first one style it and then copy paste it two times two to get the text to and text 3 because it's the same if you look at here the styling and the structure is exactly the same so I don't want to have to do twice the styling if I can do it once and copy paste it all right now let's start styling those elements so the first element here is the container so the container I need a display flexbox align center justify center and a height of 100 VH so 100 VH it means the whole height of the viewport of the screen and I need the max width of 1005 holding cells so that's when you have very wide screens I don't want it to go too wide so I limit max width to 1500 pixels so let's let's just try this one so here is my container so I'm going to call it container yep so I need a display flex horizontal center Center I need the height of 100 VH and max width of 1500 pixels okay anything else no so we are good with the container siding so inside this container here some glass tied first slider wrapper so this is slider wrapper I need display flags horizontal center Center width of 50 V W so V W it means the width of the of the screen so 50% of the width of the screen let me close this one so here is the here is the first wrapper style wrapper so I'm gonna call it slider wrapper and so I need a display flex center Center width of 50 the W okay I'll go back to my template so 50 VW and height of 100 VH so same I want the height of the whole screen slider wrapper height 100 th alright position:relative the index - so I need a position:relative because then I'm gonna I'm gonna use the absolute positioning for the for the nav bar for the slide navigation and the sides so I need to set a relative component so it's going to be my Snyder wrapper here so I need the position relative Z index - okay then I think we are done yes so we are done with the styling of the slide wrapper so inside this slider wrapper I have the slider here do I need a special styling yes I need a width of 100 and a height of 50 V W so if you look at this so I on the width I use the H which should be here but because it's a vertical cider then if you look at the bottom here I need the transform rotation 90 degrees here so I have to switch the width is actually the height and the height is actually the width because there is a 90 degrees rotation of the component so it's a bit tricky but that's what you have to use to build this vertical slider so I need so width of 100 VH and height of 50 V W so I'm going to call it this one here slider so 100 th and height of 50 V W okay position relative again so position relative it's already there oh nice yes this transform here to make it so as you see here you can see the slider is horizontal I said like here is the left arrow here's the right arrow so it's horizontal and I'm gonna transform I'm gonna use the transform here to rotate 90 degrees to make it vertical so slider transform I want to rotate 90 degrees and now you can see here here is my left arrow on the top so it means the slider is 90 degrees on the side okay I think we're done with the styling of this slider right inside the slider I have the mask I have two arrows and the side nav so the slider I have the mask two arrows side nav those arrows I'm gonna hide it because in my there is I don't use them so I'm just gonna hide those arrows you cannot delete them if you delete them the component is gone so you have to hide them here on the styling so I'm just gonna use here this button hide same with the right arrow hide and the slide the side nav here if I look at the slide now I need a position:absolute with minus 50 pixels on the top 0% left 0% right and auto at the bottom so absolute is already there I'm going to call it slide now oops so absolute is already set so I need minus 50 minus 50 pixels on top 0 percent left 0 percent right and auto at the bottom so I look at my here template I'm good and I need the z-index of 999 so all the way to the top it's the element I want to go above all of them ok back there and I need so the size is 15 pixels so the size of the of those dots I want them to go 15 pixels and I think we're yeah we are done so slide nav size is 15 all right now let's go inside the mask I mean this mask did I started no not yet so the mask is once again width of 100 th and I think that's it yes so I want the mask to go I'm gonna call it mask width of 100 th all right and now you see the slider is taking the whole height of my of my project here okay and inside the slider inside this mask sorry where am i okay close to one tear so inside this mask I have three slides so the first slide I think there is no styling yeah so I don't need anything for this slide here but in there there is a deep broke I have to style so this background image is the div block which contains the the image of those here of those monuments so I need a width of 100% and the height of 100% so the whole the whole to cover the whole mask and I need a background picture which is the monuments so here I am I'm going to call this one background image slide 1 so I have to make a new class for each for each slide because it's a different image so if I use here the background image on one slide and then reuse the class name I'm gonna get the same image so I cannot get two different images so that's why I'm going to use two different class names so here is my background image slide 1 I'm gonna get the background image choose image and I want the Taj Mahal okay I said cover in the center no toy alright I don't forget to set 1 half percent width and 100 percent right all right okay here's the nut this side now is not placed at the right position let's have a look and okay Snyder rapper I think it's because yeah so I have this slider here position:relative but I have to force it relative I don't know why but yeah and here I get my slider rapper still not okay what's going on there slider okay maybe okay we'll have a look later doesn't matter okay let's let's close this right the rapper and let's style the content rapper so here's my tip block is the content rapper I need 70 / 70 pixels padding top width of 50 v VW and height of 100 BH so I'm going to call this one the content rapper I need 70 top padding width of 50 VW 100 VH height and position relative position relative what else that's it okay inside this content rapper I have my three text rappers so the first the text rapper I need a margin left one her pixels and right padding of 20 pixels so I'm going to call this element here the text oops text wrapper text wrapper so text wrapper slide 1 I have to make a difference between each text wrapper so the slide 1 I need 100 pixels left and I needed 20 pixels here on the right party okay max width of 400 pixels 400 pixels here because if I look at my finished here the width of the text I don't want it to go all the way to the right here so I want to limit 400 pixels that's why I put the max width of 400 pixels okay and I think we are good this one yes so inside this text wrapper I have my h2 so h2 I need top bottom margin of 30 pixels I need to change the typography so here's my h2 I'm going to call it title so I need 30 pixels bottom margin the typography what is it again 46:54 so 46:54 all right it looks good and that's it okay so I'm going to replace this text with the red one just copy and paste oops so I have my first my first title here then the text block if I look at my text block any styling I need I need just to change the size of the font 16:24 so my text block here I'm gonna call it text via text block so it's what was the size again 1624 so 16 height 24 all right I'm gonna copy and paste the text copy paste right and my link here so I just need to change yeah here the top margin I'm gonna have to change this one to 30 and change the color of the of the dots and arrow so to do that I I mean I'm gonna change the text first so learn oh come on learn more I have to change I think the front as well which is here medium size 16 and I have a 400 so medium size 16 yep okay and I think the font is not the same but I mean doesn't matter yeah it's it's it's alright okay I'm gonna change this one to XO alright so I'm gonna change the color of this arrow here so the image I'm gonna go to my images I have my red arrow select my arrow tail change the background color to this the same red so I'm going to select here yep my red and no it's not exactly the same come on I want okay this one that's the red I want got a copy this this code here and go to the four dots and paste the new oops the new background color okay okay and okay alright so I have my new link okay looks good I think we just have to deal with this one still I don't know why it's not moving let me let me check real quick yeah I think it's because we need to force this one here yeah and then minus 50 pixels there we go yeah if I go to the settings here - to change to invert color and I have my dot here at the right position okay so we are done with the styling of the first slider and the first text wrapper so what I'm going to do now is just copy paste and change the image and change the text so I'm gonna go close this here so I'm gonna here I'm on the slider so I'll do just add slide here so I get the second slide and copy paste my background image slider select here go to styling duplicate class I'm going to rename it background image slide two and instead of the Taj Mahal I want the match picture and I don't change anything else alright same for the third slide add slide and I paste my background image in there duplicate the class rename it slide 3 and change the image to Petra okay on I I have my three slide so that was really quick I go to the content wrapper and I'm going to do the same with the text wrapper here I'm going to copy and paste it so I get a second one but here I have to change the positioning so if I go to my text wrapper here I can see the first so if I close this one so here is the first text wrapper the first text wrapper position is static it's the one I want to see when I land here on my on my project but then the second one is on top of this one but behind it so to put it on top of it I need to position:absolute and the third one same so my second text wrapper here I'm going to switch from static to position:absolute so first I'm going to duplicate the class here so I'm gonna rename it text wrapper slide two and position:absolute actually first before I move it on top of it of the other one I'm going to copy and paste the text from the template so here is my second text I'm gonna show it so it's display:none at the moment so I'm gonna show it and hide the first one just to get the right to write title and text so I'm gonna just copy this title here this text there right good so I now have my second text wrapper with the right text and and yeah title and text so the text wrapper if I go back to my template where is it here so I'm here so position:absolute I need a top margin of 70 pixels and 0% on the Left auto auto bottom right and that's it so 70 - 70 on top 0% on the left so where am I here so here's the first one here's the second one so absolute 70 percent on top and 0% left auto auto good so you can as you can see here my second text is behind my first one so what I'm going to do now is just hide here the slide - I mean just I'm gonna hide the first one first and now because my I'm gonna copy paste the second one to get the third one because it's also absolute positioning so I can just copy paste it duplicate the class I'm gonna call it text wrapper side three and basically I just need to change the text actually so here I'm gonna hide number two and show text wrapper number three and I just have to copy paste this so this one yes I just have to copy place the text the title and text so here I'm gonna we're not to have to do this here I'm gonna hide also the second one so I can work in good conditions alright so I have my title copy my text okay and the learn more is already done okay so we are done with this text I think yeah so I can now hide the third one hi the second one show the first one so I'm gonna just reset the display and do the same here on my template okay where is it here so I have my hide the third one second on this side and reset the first one okay so the styling is good so I look at my three here I am good with the images I'm good with the text so I can now jump into the interactions so if I look at my my template here I'm going to close the text content wrapper because the interactions on or on the slides here those three icons it means there is an interaction happening when this slide is is on display so slider change here so that when the slide one is on I want to have those steps here so basically those steps is to it's to animate the text on the side here so I want my title here it's hidden because I have opacity zero but let let's just have a look at the steps here and in this list so basically I want my title to move down 20 pixels and to go opacity zero same with the link I want to here is to move down 20 pixels and opacity zero and same with the text block opacity zero and move down 20 why do I want with that because when I want my my slide to appear I want my text to move a bit from the bottom to the top and appear nicely with a nice opacity animation so as you can see here every time my text is moving up and opacity from zero to 100% so that's why I need to set here those few steps as an initial state then then we'll have a look later of those let's first build those six first initial steps so don't let's go to my new project here I select my slide one and I want element trigger here slider change beside interview I want to start an animation click the plus so I'm going to call it slider one on and I want my in the text wrapper here text Raptor slide one I want my I'm going to close this thing here yeah I'm gonna I want my title to move down 20 pixels in initial state so I have to set here initial States down 20 pixels okay I also want to decide to go to this title to go opacity 0% all right now the text block I want to move down 20 pixels and to go opacity 0 percent and the link here I want it to move down as well 20 20 pixels and opacity 0% okay so I have my six steps for for initial so if I go back to my template I just want to show you something first here slide on if you look at those steps here there are selected element they are not class element because when my slide is when my slide one is on I just want this like the linked text to appear not all the text if I if I switch to is if I switch from selected element to class here all the text element are going to show at at the same time so I cannot read it I just want the one which are in my in my text wrapper slide one so to do this I need to change here I go back to my slide 1 slide one one side one side or one I'm sorry here you can see it's the class so I need to change all the steps from class to selected element so I'm going to select my title here and opacity here with the comment button and select element here and actually I don't need to do this I don't need to to select both if I just go to here select element it's going to change to yeah both together sect Emmet okay so I now I have my steps as selected element only okay don't go back to my slider here next I want those steps to happen so I want my background image to scale to 1.04 in two point two seconds with this easing outs in it that's the effect you see when the image is on you see it's zooming in it's zooming in a bit scaling up so that's why I need this this steps here every time my slider is on I want to zoom in a little bit on the image so background image I want to point five seconds 1.04 outs in it slide 1 okay so I'm gonna select my background image in my slider here background image 0% here I want to scale 2.5 seconds one point zero four out seen it okay that suffered our first step same here I'm going to change from class to selected element don't let's go back to the template slide one here's the first step done second step is the text wrapper here basically I want the whole rapper to show and when I switch to an outside I wanted to hide so basically text wrapper show easy let's go back to my component side one I select my text wrapper one and at the represent zero seconds I wanted to show easy okay let's go back to the template slider side one side one on this is done next step so the next step I'm gonna I want to show those elements step by step so first I'm gonna show the title then I want to show the text and then I want to show the link so it talks to the title I want to go to opacity 100% and move back to original position at 0.4 seconds here so 0.4 delay 0.4 duration or positive 100% and the move is 0.4 delay 0.5 duration back to initial position with an ease out okay let's go back to my slider here side one so I want my title here I want to move delay 0 for duration 0 5 is out move back to original position and I also want the opacity to go to 100% in 0.4 seconds done then I want it's going to be my so here's the title it's done then I want my text block so the content here same opacity 100% and move to original position but this one is delay 0 5 so 10 million 10 milliseconds after the title I want my content to appear and same with the link here another 10 10 milliseconds later I want my link to opacity 1 percent and to move to original position so I'm going to do all those steps at once now start a change slide 1 so I want my text block here to move delay 0 5 is out move to original position and I want also to go opacity 100% and then I want my link at move to move to to origin position duration 0 4 0 5 but delay 0 6 so 10 milliseconds after the previous component and I want my paucity to go 100% 0 6 0 5 good I know that was 0 4 yeah and this one 0 4 as well done okay let's go I think we've done all the steps yeah we have all the steps we need for this first slide ok nice now I'm going to build and first I'm gonna have a look at the slide out so what do I want when I my slider is moving out I want my link to go opposite is represent I want my text block to go past is represent and the title opacity zero percent so all those three I want them to happen in 0.3 seconds so dumb I'm going to go back to my slider here so slider out of view I want to start an animation I'm going to call it slider one off and in the side of one off I want my title to move no it's not first is the opacity so I want my title to go opacity 100 0 % Surrey in 0.3 seconds same with the text block opacity 0 percent in 0.3 seconds and the link as well opacity 0 percent in 0.3 seconds okay I have my first few steps here let's go back to this one slide out so those three steps are done I have to change to selected element as well here I have to do this ok so at 0.3 so after my opacity is down to 0% all those steps I want them to happen so I want to move to 0-2 mine down to 20 pixels sorry I want to move the text block down to 20 pixels I'm going to move the title down 20 pixels the link as well down 20 pixels and I want to hide the text wrapper I want to be I want to hide that X wrapper all those steps here I want them to to happen in 0 seconds so instantly done so if I go back to my slider here slide off so I want my title at a zero three here I want to move it 220 pixel down zero zero text block move down 20 pixels zero link move to minus 20 pixels zero zero seconds and I want my text wrapper so this one here to hide okay so I still have to change those elements here so I'm going to select all three using the shift and switch from class to selected elements okay I can I am done with the slider one off let's go back to this one just cross-check but I think no there's one more step here it's the background image I wanted to scale so remember when I on the slider on my my image is scaled back to I scale to one point zero four this time I want to scale it back to one at 0.7 seconds so I need a delay of 0.4 scaled back to 1 so go back to my slider here slide off and I want my background image to scale delay 0.4 duration 0 I wanted to scale to 1 okay I have I'm done with the slider of 1 so now I can basically duplicate those interactions for the second and third slides so let's preview those interactions first so yeah on the first slide I see so second side there is nothing because there is no interaction but when I put my first slide on I can see so the image is doing meaning and text appearing nicely on the right moving from the from bottom to top and with a nice opacity so that's actually what I want so what I'm gonna do now is just duplicate those interactions to the second and third slide so to do that I'm just going to go to the slider mask here slide 2 so I want element trigger to select slider change create a start a new animation and here I'm just going to duplicate this one here slide that one on select here rename it slider to on and then I have to make some changes here because all those elements it's linked to text wrapper slide 1 but I want to change those elements to text a wrapper slide to 2 mu to appear the second title a second content so to do that I'm just gonna open here my text wrapper slide 2 and select my H 2 and H 2 here here a selected element I'm - because right click change target and here in my text repress I - I just switch from this H 2 to this one here and that's done I think this one yeah we could have done this one as well together so I select this one here change target and I want this one here then I'm going to select the link so this one this one this one and this one all for links right-click change target I want this link down there and then same with the textbook I select all those text blocks right click change target and I select my new text block here from the text wrapper slide to okay as you can see now they switch from selected elements to class so I have to select all those elements as well switch to selected element and yes here I have to switch as well the background image slide one I want to change target to background image slide two to shoot the second picture and the text wrapper here is Tex wrapper slide one I want to change to Tex wrapper slide 2 done and there is one more step I need to talk to to put is so here if I go back to my preview here so here is the text wrapper slide 1 we can see text refers lied to is is hidden is display hidden so I need to add here and and a step where I activate I show my text reply to when my slide two is on so to do that I'm just gonna select my text reverse side to here and activate here at 0 at 0 sorry no it's just it's the initial Satori at initial state I want my text wrapper sly to to go hidden that's what I need because if not then I'm gonna mixed the text repress slide 1 and text for aside two together so interested text for plus side to hidden done so that's that's good now I'm gonna do the same for the slide out of you so start an animation I want to duplicate the side one off so I'm gonna duplicate and rename the second one here I'm gonna rename it slide to off and same I need to change target of those elements so I'm going to select here H - H - so I'm holding the command key to take several several steps so H - H - I want to change target to this one here from my text reply to link and link change target to this link and the text block and text block right click change target to text block alright now in the last background image that one change target - background image slide - okay and don't forget the last one here text repress slide 1 I want to change target to text wrapper slide - okay I still have to change so those elements the 1 back to effect class so I have to change them if I hold the shift key change them to selected elements so we're good those two here it's only one element so we can leave the class one done so if I go back if I go to my preview how does it look so first one it looks good second one looks good so I'm just going to do the same for the third one and we'll be done with this component so I just have to go I'm going to close this slider here slide three interactions so I want to slide a change start an animation duplicate the second one slide the two on I'm going to duplicate it select this one rename slider three on and all those steps are good I just have to change the target so I'm going to select H - H - H - H - here right click change target go to my third text wrapper select my h2 on in my text wrapper light three so that's good then I select my link link link right click change target link here in my third text wrapper and the text block text book right click change target text block okay background image slide to change target - background image slide 3 this one the third image and the text wrapper slide to change image to text wrapper slide 3 and we are good with this one still I have to change so the title the link and the text block I want to select element only yes that's good done and same for the slider out view I'm going to start an animation duplicate the slide to off duplicate select this one rename it slide 3 off and change those elements h2 change target h2 link oops no not title change target oh yeah that's right title sorry link 8 I want to get this one here and the text block I want to get this textbook here good this text wrapper I want the third one and the background image slide two I want to change to brag on image slide three once again I select those three here and no not this one I want to select those three years and effect selected elements only and we should be good if I go to preview I got this my first one here second one and third one if I go to my just gonna activate the automatic sliding so autoplay slides here and switch duration to 400 say if I go to my preview here so I have here my template without my auto to auto play for the three sides yep and here is my new component that's that's it exactly the same we just need maybe some here's some change here so it's going to be real quick you see those dots here there they have more space than mine I think that because if I go to styling here now if I go to the settings spacing is 10 pixels and if I go to mine spacing is only 3 pixels so I'm going to do 10 and if I go back to preview if you look when I switch from one slide side 1 to 2 for example the image so slide 1 is staying in the background but slide 2 is sliding over it instead of here it's sliding all together so to do this I'm just gonna switch animation here from slide to slide over and if I preview that looks better yeah that looks so here is our template and here is the new slider exactly the same so we are done for we're done with this tutorial that's it for this tutorial as I said it's a little bit more advanced than usual but remember that the more you practice the better you'll get using web flow interactions so keep on practicing if you only visit the live preview of this component or cognate in web flow I put the links in the description so go check it out and if you want to find more web flow components interactions and tutorials go visit no contrived calm and don't forget to subscribe to this channel to get all the new videos I'll see you guys in the next one ciao ciao

Channel: NoCode Tribe

Views: 2,302

Rating: 5 out of 5

Keywords: webflow, webflow tutorial, webflow animation, webflow slider, nocodetribe

Id: mAgw_2IRyQE

Length: 55min 2sec (3302 seconds)

Published: Mon May 18 2020