Ingenious Position Sticky Layouts Inspired by Teamway.io - a Webflow Tutorial

today we're going to be creating some really cool layouts using pure css and what i mean is that we don't have to mess with webflow interactions or even bring in like a custom javascript library even though it kind of feels like it should we're just going to be using the style manager to use position sticky and create this really fun layout so i want to show you what i mean we're looking at the teamway site which by the way i love this design the color palette is beautiful some really interesting layouts i love how they're using video here in the header um fun illustrations but this section in particular is the one that caught my eye i love kind of it has this almost like layered accordion type of feel and you immediately get the sense of oh there are these three easy steps that i have to follow and as you scroll they kind of unfurl um so uh i don't think we'll get this exactly the way um it's laid out here but we're gonna get really close uh using position sticky all right so let's hop into webflow and i've already got three sections in here the first and last are um set to 100 vh that way we have plenty of room to scroll and we can really see the full effect of that position sticking and then i've got a section here with a container nested inside of it and let's add a div block and give this a class of accordion wrapper and inside of there let's add another div block and call it accordion pane so we're kind of these are the building blocks of um our accordion accordion pain let's give it some styling that really feels like the teamway site so i'll give it a background color a nice healthy amount of padding some corner radius which is going to give it that really fun modern look and then we're also going to make a flex box so that we can have some things in here and the first and last div block will create a class called flex expand and set the sizing to expand and that way they'll take up about a little bit less than 50 of the container and then the one in the middle um this is what i often do for really simple two column layouts is create a flex spacer set it to do not shrink and whatever size you want um or feels best then i actually also give it a hike so that when we switch to mobile and go to a one column layout uh the spacer is giving us a little bit of padding between the content at the left which is now on the top and the content on the right is now on the bottom okay so now we've got that nice set up let's go ahead and add a heading make it number two and then i'm going to steal the lorem ipsum from this paragraph element but i want to use the text block okay and then let's add an image and i'll choose my image from just a random image here and i want to give this a class of width 100 and block okay so this is the basic building block of our accordion pane and if i add two more you can kind of see where we're going now we have the three items um stacking on top of each other similar to the teamway side up here all right um then let's go ahead and give these each a combo class that's specific to the um the item so this will be pain one pain two and this will be pain three uh with pain two i wanna go ahead and change the background color and maybe we'll do this um maybe that's light gray there and we'll set the text color to white so that our text is nice and legible and then with this one we'll change it to an even darker color and change the text color to white as well so it's nice and legible all right one last thing that we need to do um to kind of wrap this up is let's add a text block and we'll just call it maybe like accordion number and i'm just going to use absolute positioning for this so pin it to the bottom left maybe something like 32 pixels a pixels uh since um you know what we can't see it because i didn't set the accordion paint to position relative so right now it's static i don't want to set it to just pane one so we can go into the selectors and select the accordion pane and make sure that it's positioned relative and now we can see our number and we'll call it zero one um we'll do something like uh where's my typography oh here it is two rums and something uh nice and bold okay so now we've got that and then we can just paste it into the other ones all right so now we've got the basic building blocks for our accordion ready and now we just need to use position sticky to achieve that nice cool accordion look we're ready to implement our position sticky and i think we're going to have so much fun with this because usually when you use position sticker at least when i do i'm almost exclusively using the top attribute to kind of pin something to the top of the container so that it stays fixed in view as other content scrolls by but today we're going to be using the bottom attribute all right so i'm going to click on accordion pane make sure i'm targeting the one that doesn't have the combo class and first i'm going to change the position to sticking what we don't want to do is go ahead and set the bottom to zero because what will happen is our cards or our pins are going to be flush with the bottom of the viewport it doesn't look the best i'm going to use 72 pixels because that matches the padding on the inside of our cards so that looks a lot nicer all right but you might notice that our stacking is a little bit off because we're seeing the third card stacked on top of everything else and we're going to use z index to fix that i usually avoid using z index i like to use just the natural order and the navigator here but we can't avoid using it today all right so i'm going to use reverse order so with the third accordion i want to make this the index one with the second one make it two and with the first one make it three and that way it's stacking on top of the other two all right so now we're getting that nice um beautiful kind of accordion feel but we have an issue and that we're not seeing the um all three cards or the bottom of the second and third one when we get into this section and i think what's beautiful about this layout is that it immediately puts the user in the frame of mind of oh i'm going to be looking at three subsections or three kind of inner categories inside of this content group it's not like a process thing or how it works thing or three things inside of this other category so it's just i love how you just see it and you immediately understand what you're about to digest visually so just wonderful leia i really like this okay so to achieve the kind of layering of the tabs we're going to be changing up the bottom attribute per pane and then we're also going to be using a little bit of negative margin and some positive margin bottom okay so here you can see that i've got number two selected and all i have to do to kind of make it rise up and stack above the third one is change it from 72 to 144. so now our bottom one is stacking kind of on top of the other one and we're essentially going to do the same thing with the first slide but just increase another increment so instead of 144 it will be 216. and if you didn't know that was 72 times 3 that's okay because i had to do the math on a calculator okay so so now that's going to stack appropriately but we still have an issue because when we scroll into the section the first item is still blocking um the bottom three ones and we can't see it quite yet but the second one is also still on top of number three so to change that we're going to use a little bit of negative margin because that will initiate the stickiness faster so with the second one uh we're going to set it to negative 72 pixels and with the first one we'll set it to negative 144 okay so now when i scroll into view we're seeing all three cards beautiful that's exactly what we were shooting for but we still have one small issue and that is that when i scroll up um the first card is still overlapping the second card a little bit so i know this is a little bit weird but i'm going to add 70 pixels of margin here just so that we're pushing the card down a little bit below it okay so now we're still getting the three stacked accordion panes when we scroll into the section and when i scroll up this one is not overlapping the second card and neither is number two all right so beautiful we're almost done because if i hop into the x-ray mode you might notice that our section that is housing the accordion wrapper is actually starting down here and because we're using negative margin our accordion panes are moving up and above the section and if we had any content up in the section above it it would start to overlap that content so to address that we're just going to add in 144 pixels of padding to our accordion wrapper so right here um and that way our cards are stacking in the correct place so now the cards are not going to overlap any content above it let me go ahead and take off x-ray mode and maybe i'll just go ahead and preview this actually so we can see it in its full glory here so now when i scroll into this section we're seeing all three of these panes and then as i scroll the bottom two are staying fixed in place and slowly revealing themselves as we scroll through all right so that does it for this week's video i hope that you enjoyed digging into the teamway site and really thinking about how really simple development strategies like position sticky can unlock these really ingenious layouts that communicate to the user almost instantaneously i'm trying a new schedule where i'm trying to do smaller like 15 minute videos on a weekly basis so uh crossing my fingers that i'll actually stick to that schedule but anyways make sure that you subscribe and hit the notification bell and that way you'll see if i actually live up to that goal that i've set for myself anyways i'll see you all in the next one [Music]

Channel: Jose Ocando

Views: 1,470

Keywords: Webflow, Tutorial, Web Development, Website Development, Web Dev, No Code, CSS, Position Sticky, Teamway

Id: 86Sv9i16AdQ

Length: 11min 28sec (688 seconds)

Published: Tue Nov 02 2021