Creating a horizontal scrolling page without coding

alright alright hey everyone welcome back to another wet floor workshop I am your host Nelson thank you for joining me this week episode 105 yes we are creating a horizontal scroll page today now before we dive into the topic I always like to point out that if you're new here welcome this stream happens every Tuesday at 10 a.m. Pacific time the stream we teach you how to do some basic to intermediate stuff inside of web flow and how you can utilize it inside your workflow also we show off new and upcoming features whenever that's available to show on the stream and then also every Friday we do a community stream where we teach advanced topics on web flow and this happens on our twitch stream twitch.tv slash web flow app and that happens every Friday at 10:00 a.m. now last week we didn't have any of those streams we could because we took a break for Thanksgiving week and so I've missed you guys and gals so let's get back on this productive train in make something happen now cool my camera is working not lagging this is good so today we're going to do some horizontal scrolling so I'm not talking about making the user scroll with their scroll wheel left and right no you can make someone scroll left and right by going up and down on their scroll wheel kind of confusing here let me give you example of what our lead brand designer Ryan did so if you're not familiar with this page is an awesome page go to it web flow comm /ix - this was a launch page to introduce our new interactions feature and it's super awesome it's just a timeline of things that happen on the internet like how window was created and what happened since the creation of the ink or the World Wide Web now if you look at the bottom that's actually a horizontal scroll okay so if you scroll up and down it's a horizontal scroll and now if you go here notice how I'm scrolling down okay and then it's like the page just stopped and then it's moving this but in actuality it's still scrolling down but an interaction is being made to push this big div left and right okay Oh blaze you didn't add a sticky link to the workshop thank you let me do that real soon thanks for letting me know and then when you get down to the bottom of this section then it continues down somewhat on Twitter before I did this stream someone on Twitter said hey is it possible to do some sort of scroll jacking thing where you when some of the scrolls it makes them makes the page horizontally scroll right to a certain section and then you scroll up and then goes left to a certain section and it kind of has that snapping effect where it snaps to each thing let me show you example what I'm talking about so Dyer modes actually created this March 9th and here's I think this one uses well now let me check it's a sample site yeah using horizontal scroll j/s plugin and let me put the link in the put the link in the chat room so yeah let me show you real quick so if I'm scrolling down on my scroll wheel if I scroll down it goes it's it snappy but some people have these scroll wheels that are that aren't a bearing and it just Scrolls really fast like mine so if I scroll really fast oh this morning it wasn't doing that oh geez that's weird Scoob this morning when I was checking this site when I scrolled it would keep rolling to the next section and I'm like I'm not ready for that next section and so I felt like I didn't have much control but I guess it's working now so okay so whoops so this is another way to do it but again this is with a custom code horizontal scroll dot J's plugin now me personally I don't like what they call scroll Jacky I don't like it when you are scrolling and then it takes over your wheel okay I'd rather have full control and I don't mind seeing the in-betweens okay and what I mean by that is let me see here scroll where's mine okay well I like it where and we're gonna show you this I'm going to show you how to do this I like it where the user has complete control on the timeline so for example here I have complete control it's not snapping to a certain section all right when I have when the to me when a user has full control then that makes for a more enjoyable experience whereas scroll jacking it's like a surprising experience like whoa what just happened you know okay I guess it's taking over my scroll wheel and I have to you know play by their rules okay yeah so that's what we're gonna get into today and I'm gonna be using my favorite band or two person do Daft Punk as my imagery and so what I'm gonna do is we're gonna have a couple of sections side by side large and let me show you example what I practice on real quick there we go and right here okay cool there it is and so see I have complete control it's not snapping and that's fine especially if you design it well to the point where this doesn't feel that bad and I think it'll be cooler if it's a fixed background and has images so the images overlay each other but they're not scrolling okay let me just show you what I mean and we'll just get right into it and if again if you have any questions while I am doing this go ahead and ask it in the chatroom and I'll see if I can get into it and yeah let's see here any questions any questions how will this vertical scrolling work with small devices yeah so of course I do I try to get into the responsive design if there's time and I think there will be some time so I'm gonna be using flexbox for this to make everything horizontal on the desktop and tablet and then for mobile landscape and portrait I'm going to flex box and stack it vertically and so it's just a traditional it's a just a traditional long scroll all right cool let's do this okay okay all right so first thing I want to do is the trick is to make these to the page as big as tall as the width of your sections okay so I have five images I'm going to use one two three four five and it's just the discography of Daft Punk let me just I'm in the right order there we go okay so first thing I want to do is I'm going to have five sections so each section is going to be a hundred percent of the viewport width so I'm going to use VW and I'm gonna use that same mesh for the height of my site so here we go I'm gonna drag in a div block and this one I'm gonna probably scroll because this is the thing that's gonna make the page scroll down all right so the height is gonna be 500 V W okay I know it's kind of weird because I'm putting a width inside of a height but stick with me okay so here we go VW okay and the overflow of this is gonna be hidden or actually no I don't have to do it sorry all right so that's done and so this will allow us to scroll up and down on the page now let's put in another div block and we're gonna call this you can call this wrapper okay and this wrapper is going to be fixed to the top left of the page and it's the width is going to be 500 V W okay all right cool so the 500 V W and that's 500 with because each section is gonna be 100 V W okay so inside this wrapper let's go ahead and I'll put in a section and this is gonna be called section the width is going to be 100 V W and the height is 100 V H and yeah section 1 I'm going to use a combo class of 1 and this background is going to be this one so yeah they look kind of weird but that's them before they had helmets you don't know who Daft Punk is look it up and Andrews just got the light turned on like oh you mean make the height of all combine content yep answer a lot of questions help yeah that's the little trick right there okay so here we go so this wrapper is set we have this section and let's go ahead and copy it and paste it four more times so copy paste space space all right cool and let's see here on this rapper right here let's go ahead and set this to flex so they're all in one line you can't really tell can't I scroll no I can't scroll left and right and then for the Flex child I'm gonna say don't shrink okay I don't want them to shrink alright and let's see here so section 2 I'm not gonna be able to see it but I can visualize it in my head I replace the one with the two so I can make a new clef a new background image and this one is discovery they're one of the best ones and discovery is that one yep just set that to cover centered fixed no-repeat and let's just take a look actually let's just keep going so I'm gonna just do the same thing for number 3 shoot image wait a minute okay choose image number 3 is human after all this ayah okay it's that one cool [Music] oh I can put the know shrink on the okay thank you thanks for finding that thank you Andrew let me go back to section one then and remove it good catch thank you guys for helping hi cool so we have no shrink on the parent class and not just the number class all right moving on number four all right so number four the image is alive oh my god such a good one alright and then last but not least random access memories they go alright so now how to make it horizontally scroll okay so here's the trick we're gonna go to the interactions right here in the top right and this is on current page we're not doing selected element we're doing on current page while page is scrolling as our trigger and play a scroll animation actually let me make sure that I select the wrapper okay so I'm selected wrapper go back to this let's make the smoothing 75% make it more smooth okay and call it scroll animation and now on the move this is gonna be 0vw right and then on the hundred percent we're gonna move this not 500 because we don't want to go all the way paths the the last section we want to go up to the last section so this is only gonna be 400 V W okay hmm that's weird 0vw huh well let's see what life preview does oh wait it's supposed to be negative huh there we go negative because I want to push it back I want to push you towards the left not the right okay there we go so let's go and yeah it doesn't work but you can see it moving Oh fun maybe it shouldn't be flex maybe you should be display:inline for all the sections I wonder why where's my section it worked last night when I was practicing I think I may have done something wrong so that's another section that's another section is my image is not showing now interesting how interesting 500 VW is the height weight that should work oh gosh scuffed it happens it happens this is what happens when it's life sorry everyone let me go back to the one I worked on last night but that's the trick you you make the the height of the page the same width as the el-amin you're going to scroll so here's what I did so I did that horizontal so they're all like that 100 BH and on this rapper are you 200 B kids huh I guess I have to put the height that's weird and with all projects I always let you guys duplicate it they're cloning on your own site on your own dashboard so that way you can learn or build on top of this so you can take this project and then make it your own so that's what I did that's what I did and let's put it back to flex because it works on the other one flex your wrapper okay I flex it and it's on the left so all of them should be pushing on the left and then each one of these each one of these should be 100% viewport width viewport height and there we go where is my background so section 2 doesn't have a background image why it's so weird okay well your wrapper is VW but on the example is VH oh did you find it the height your wrapper is VW right here but on the other example is VH exact right example really now all right I'll try that hmm doesn't seem to be doing stuff let's see here yep Oh inspect how come section one works but not section two oh darn oh darn sorry everyone let me just test this real quick so if I put a background color should I see it yeah it's something wrong with the image interesting so I did it right it's just that the background image wasn't working could it be something wrong with me or did I mess up cuz if this works that's so interesting and that should be VW because of how far wide I want the wrapper to be very interesting sorry about this everyone first time this happened on stream but you know that's the web for you that's the way up you just got to try to figure it out so yeah it's not a z-index engine issue Andrew it's because it's fixed if I remove fixed I think that'll fix the issue so watch this let's see here yep that's it so what I wanted it to do huh that's it the background because what I wanted to do is is is swipe and not make everything flow like this I wanted just the image to overlay on top hmm I guess I'm gonna have to figure that one out on my own so I'm for not figuring that one out last night guys huh I guess I got one that one stumped me because I thought it would be like you know um hmm oh I guess it can't work like that huh okay I would need to figure this one out I'm trying to fix it in my head and it's not working huh first time Oh first time all right huh this man was sound like a weird question but it's possible to do to do a page that Scrolls down to a certain point let's say scroll right three sections and down again does not a weird question we just reviewed that on the here and you can look for horizontal scroll web flow on Google and you'll find two articles but if you scroll down watch this so scrolling scrolling it stops but it's not really stopped it's doing the same thing we just did on the beginning of the stream and then after it's done getting there he goes down but what I wanted to try for is something a little bit different where the images go on top of each other okay so let's just continue with this and then if I find out how to do the other style in my head I'll do it off the stream but yeah let me make sure that all of these aren't fixed and then we'll continue on hey Randy welcome from Slovenia nice a global community all right let's fix this and let's take out that background color on the second section and let's just keep moving on okay so we have it scrolling like this now that should meet down more but okay so now we can go ahead and do some other things in it as well like kind of put some let's put some text inside of it that explained it shows you know the name of the album and the year and then lastly we'll put the logo okay so I'm gonna set this position to relative on all the sections because I'm going to do a position:absolute with the text should should be yeah so this first one right here since there's space in this image I'm gonna put it right here and let's just call actually gonna make it h2 because there's gonna be multiple and we're gonna call this album title okay and all the album titles we're gonna set them to because they're Androids we'll use dried sands see what I did there this one is homework should we make a bold then here we go and this one I'm gonna set that to give you the combo class of album nope rename album one so that way you can reuse this album title multiple times but the secondary class is the positioning of the thing of the text oh no no no shoot sorry let me remove that I should wrap this because this is what's going to have the position so title rapper so this is what's gonna have the positioning so set that to position top right put it down something like this actually use percentages there we go and then in here I can put H 3 and this is going to be the year so 1997 and then you can add some what we're gonna do is add some in an animation let's have it fade in and out ok great sans make this normal make it white but not not the same like kind of off like that cool yeah this one needs to be closer to like a little the kerning something like that we'll make this smaller here as well cool something like that I think that's a good start cool and so what we're gonna do is we're gonna make these enemy in and out and how we can do that is how we can do that is this while page is scrolling so at 0% this album rapper right here is going to be at zero okay and then I'm gonna move it again and we have to do some math so that there's five sections right yeah so 100 divided by five is 20 so at 20 percent this would move down to 25 pixels okay so this is what I'm what I mean I don't know if you can tell we make let's make it 50 so it's more apparent or 100 let's just get crazy yes see as you can tell it's moving down as I scroll down and by the time I get to 20 percent it should be all the way down 100 pixels and let's make it fade out too so need to use my opacity and I'm 0% it's gonna be at a hundred percent but at 20 percent it's going to be at zero so now let's look at it again and see how it fades out you can kind of see it okay cool all right so now we can just do the same thing but we start from 20% and then go to 40% and so on on so on so let's continue alright where are we this one copy and paste now we can't really see it so let me just put this section somewhere else where I can't see it and then I'll put it back in here when I'm done working okay so we have this and this one is discovery did you know that discovery is actually very disco and then one of their tracks is like it's a different language I forgot which one but it actually means very disco mmm all right evening Felice that's me fanboying right there album - okay so I want to so instead of being on the top right this one's gonna be at the top left and then push it down here something like that that's cool and yeah actually can I know let's just leave it cool and yeah let's go ahead and bring this section back up so you can see how it looks and while we still have album title rapper selected on the second section I can go back to my interaction and let's go ahead and add a move okay so at twenty and twenty percent all right this other title rapper we're just yeah very disc whoa Stevens nice this is the second album title rapper this one will be pushed down a hundred pixels and we'll set the move again but at forty percent on the keyframe it's going to be zero pixels and then we do the same thing with the opacity we opacity:0 and then at 40% we add it at 100 and let's live preview and there we go I think I saw it did I see it at the beginning I think I did let's preview it double check no I didn't okay cool so there you go we'll just do this three more times so you guys understand it's a pretty cool way to do timeline type of stuff I mean if you can imagine this as your baseline you can do stuff like I don't know for work you can pie charts bar graphs or something like that that's growing as you get to that section and again I feel like this is really much better than scroll jacking or making things snap because you're giving full control to the user even though they can see in between you know it's not really that bad you know it's like you're turning a page in a magazine you know you're gonna turn the page for the user or let them experience for themselves you know alright let's keep going Thank You blaze I think your interactions are better blaze you can do some crazy stuff alright so let's move these two sections outside and work on our third section whoa weird see that's what I wanted to happen like that kind of effect where it's fixed but I'll figure that out later all right let's move on alright so this is section number three let's go ahead and get the album title here this section put it in there this one is human and obviously you know where I'm going to put this text this was in 2005 so this is gonna be album two good three that's actually nice right there let's fix this here album year three a little bit lighter like that okay cool just make sure I can see it alright so there we go okay cool and now let's go ahead and put our two sections back so that's the first one and that's the second one and while we're still selected on this even though we can't see it you want to make sure that we're selecting on it so when we go to our interactions tool we can start messing around with it all right so we're starting at 40 and we're going to add a move set this keyframe to 40 and this one's gonna move down a hundred rinse and repeat so this one is going to 60 and this is going to zero pasady and 40 and starts at zero one more opacity and this happens at 60 take a look oh it showed up at the beginning I think I have to how come that one is not going away I think I did it backwards this one here we go the move at 24 starts here it should show up here Oh am I not is the keyframe maybe you can shift the transition by 10 so that way the title finishes when the section is 105th at makes sense maybe you're right yeah so what you can do if you want to shift a bunch of stuff is you can hold shift and then select all of them and then do what you need to do so I'm gonna do this at 10 this one could be 30 you may be right Blaise and this one could be 50 but that other one is not moving away that I do it wrong oh I didn't add the effect of leaving okay well bed okay let me do that real quick I'm gonna move this at 50% this has to go away at 100 and also the opacity has to go away to zero if you like preview there it goes cool okay yeah thank you blaze all right Andrew I am so lost I'm trying to work along with you and the entire page is also scrolling down while the wrapper moves left and right what did I miss uh so if you're working with me at the same time good on you I've never heard someone do that but the wrapper your overall wrapper should be fixed to the top left so that way the the page is moving down but the actual section is not moving because it's the wrapper is not moving it's set to fixed all right okay okay let's continue so we're done with those three let's do two more and then after we do these two I'll take more questions and see what you guys are working on and then we'll go into the responsive design part of this stream okay so we're on this section right here alive so good all right so this one I'm guessing is gonna top right over let's say album for absolute there okay cool that works ah such a good one alright rinse and repeat what are we doing this is still selective none no nope no move our sections back one two three this one's still selected going back to the in animation now we start at we're gonna start at 50 and go to 70 so let's move it down at 50 100 pixels and then at 70 we're going to move it to zero that's 70 and there we go cool now we can do the same thing with opacity so at 70 it'll be 100% that's fine and then opacity again at zero but at the 50% so I just did it backwards right there that's fine alright so like preview so that one works that one works that works now this one you can't really tell because it's on the other side so maybe these can happen at 60 because it's on the far right so you can't really tell if it's animating or not see it's kind of animating so maybe I should push it like more like say 65 yeah I guess this one will be 75 so yeah it's up to you to play with it there we go then I guess right here had 90 to 95 yeah 90 to 95 is when it goes away again and I think this one is still missing its fade-out so let's do that some so from 55 it's 55 to 60 is when it'll fade out so let's go ahead and do a move on this one go back to 165 and then also now pasady at 65 0 okay then here cool alright last one actually second-to-last let's fix this real quick so you wanted to do this one it starts at 95 I can you know starts at 90 and then goes to 95 so let's add another action here we go so this one's gonna start at 90 and it's gonna actually goes to 95 sorry 95 there we go and 95 it pushes down to 100 pixels and also it sets the opacity to 0 and 95 there we go yep just like that cool alright last one oh they look so slick there let's copy and paste that album title wrapper inside of that section so we know what we're doing let's move all the other sections out in order go here I memorize that year that was such a good year all right this one I don't think it me okay yeah oh one five let's push it down a bit No I think 2.5 yeah there we go cool all right so that one's fixed let's move these up in order this one selected and let's do our final animation live preview this one right here Tuesday dinner always tastes well thank you for having your dinner I'm glad to be your dinner entertainment it's always good to learn so must be fun let's move this what are we doing moving it on the 90 where are we okay cool on the 75 let's go ahead 95 percent keyframe 75 push this down a hundred and set the opacity to zero and then when we get to 94 actually it should be 85 when we get let's see here where am I it should be yeah 80 from 80 to 95 yeah so we'll go here add another move but this one's going to be at 80 it should be at zero and then that's not 100 I said 80 eighty it should be at zero and then the opacity yeah the opacity should be 100 I think that does it yeah I don't need a fade-out because that's the end cool yeah and so let's publish and that should be it yeah not too hard but oh what's that gap oh man probably the image or something there you go there you go cool there goes okay cool so let me take your questions and if you're working on something on web flow that you would like to show the rest of the community go ahead and do it now send your web flow I'll link in the live chat room and yeah yeah let's get into questions questions questions Mitch are you not writing the code yourself just wondering if this is what I'm looking for welcome to the stream Mitch so I'm not writing code I'm letting web flow code it for me however the code that web flow produces is very clean so everything you just saw me do all these right here let me show you my screen again all these interactions these animations is just me visually coding it and if you look at the page source that's how clean it is we've minify it and all the JavaScript is done on our platform so that way you know as a designer you're you're executing what's in your head okay and it's still a professional tool it's not like just WYSIWYG drag and drop type of builders it's a unique one where you still need to know the basics of HTML and CSS to get going and if you don't know that we have a university or not web flow comm that teaches you those basics and also a web flow if you already know those basics you can use web flow to to speed up your process ok good question though and again thank you for joining us the blaze that the ability to filter our multi reference CMS fields was bugged recently do you know if a fix is coming soon uh I would need to check with the support team on that but yeah we that is something that we need to fix and I did put some too gets in for that so I'll let will let you know in the forums shifts to okay okay we got some links lollipop what's up I've been playing around with the designer this afternoon oh you're doing a volume slider what's going on show you my screen oh oh and this chain is this a hiding show Wally is this a hiding show wait okay that's cool that's cool that's cool good job Wally this is my first pass at my personal site personal sites are hard oh so good job on you Mason for doing it the hardest part is like liking what you've done because we our own worst critics that was cute I like this I like the colors already I'm happy already I'm happy even though it's just text I'm happy alright let's venture down cool oh nice colors nice gob box shadow nice this is nice nice to meet you Mason okay okay that's cool does it go away okay it's a squirrel interaction okay that's cool a tease feel like it nice great job your new visual identity is only an email way I like that simple copy but powerful simple but powerful Wow next nice okay that was weird what happened refresh yeah that was weird I think you have a interaction issue see how it like on first click it goes out and in okay that's cool it Scrolls all right now I don't usually do this thing in a stream but you know it looks since it's a responsive design tool what does it look like all right so I did a stream a while ago a couple of weeks back about creating better mobile better mobile menus and this is a perfect example of how a mobile menu could work as far as the interaction however one thing I would change about this is making this just like a floating action button that Google material design does put this on the bottom right because as a mobile user it's easier with your thumb to hit the corners the bottom corners it's not easy to hit the top corners all right so easy fix for you Mason push this down here and maybe get give that a fill color and make the plus white so inversely invert these colors and keep the interaction the same however make this pop up above the circle so you know what I mean great job great job and I think doing that with your mobile menu would make it perfect all right you always want to make the user experience good for the user all right moving on moving on okay okay for some reason I couldn't get hide and show to work so it's opacity yeah it's um might be something wrong I think we fixed that you might want to check again Oh see here hi Nelson have to express how cool is to is during the beta I was just afraid of ie compatibility but since launch it's also running under IE 10 whoa I did not know that but then again I don't have clients using IE 10 I'm glad to hear it's working for you yeah yeah great job all right any other questions or yeah any other questions or things that you want to show the community during this stream before we get into the next section trying to make this Daft Punk timeline responsive okay we've got one more here we go pixel projects what are you working on DOOL DOOL says thumb compatible mobile button thumb compatible I'm going to use that in dual put your Twitter handle because I'm going to tweet that out right after the stream I like that make sure your your menu is thumb compatible all right so here we go pixel projects nice it's a web design towards a school do you mean web design okay yeah so web design is two words that's the cute logo and the texture it's nice oh cool looks like posters I like that okay very simple let's go to info about me okay so there's a thing about these top bars nowadays more and more people are thinking this it's an ad so I don't know they call I like ad blindness or something and so not sure this will really work up here because it looks like an ad even though it isn't but maybe something that floats on top of this or like is kind of like um I'm trying to explain but let me go back to Mason's site where's Mason site so having a call-out of where it's like like this you know it's off the image it's like floating on top of an image but not really like half and half so something like that and loops and so maybe something here or down here I don't know something because people will miss this cool that's a good shot like that I like how this mountain follows cool and you got the moon in there too okay nice shot get in touch nice and clean I like this drop-down is huge that's a good form I like it great job just finishing up okay good job tool yeah we should make some compatible into a thing yes make it let's all make it a thing thank you dual burger menu out thumbprint menu in our knob 18 hours to create it Oh what did you recreate parallax scrolling spearmint I love it when you guys experiment we can all learn from it oh what's going on oh dude already freaked out any scrolls like 20 pixels okay the first thing I would suggest is more smoothing this one definitely leads like a 80 percent smoothing but man oh my gosh oh yeah this one's going up and this one's going down this is intense 18 hours man oh you put a lot of whoa okay so we're gonna keep going that's intense oh man and see this is what I mean by like not scroll Jackie I can enjoy this experience whereas scroll jacking if I scroll little it would like snap to a certain section you know and it's like I don't want to snap to that so I want to see everything in between so hope I'm not making anyone dizzy but that's cool great job Arnab great experiment you can so everything you learn from that you can everything you've learned from that you can really really take that knowledge and put it into future projects and you're gonna get clients that are just gonna be so loud and they're like yes this is exactly what I want great great job all right ninja tiny else a longtime follower here hi recently my company decided to update the site so I convinced him to let me build it design and build and web flow yay chat doesn't send me let me send links I think I see your link hold on where is it okay there go okay first thing I would do I was expecting it but um so yeah I love the look really cool nice logo maybe this could be up here three lines instead of four okay that's interactive I like it this what if this had a page load interaction where the squares like came in in a staggered load where it's like one two three and then the phone dropped in and then angled itself or something like get crazy with it and use 3d transforms and stuff like that right and then maybe have a background video looping of the actual app being used okay and then to take it even further to make it even more interactive and fun where people are just staring at this thing and making them stay on this home screen as long as possible because it'll help with your bounce rates use the continuous mouse movement interaction where you keep where it plays around with a 3d Miss of the phone and so people can like move their mouse around and then the phone like tilts then goes up and down so I can see a lot of fun happening here just by looking at this a lot of fun that can be had here okay so keep keep it keep working at it yeah I would add interactions to all of this stuff as I scroll down they should be fading in and moving in some sort of direction maybe it comes in an angle rather than just a straight horizontal or vertical maybe the music icon could be like dancing just a little not obnoxiously just a little and it's a looping effect yeah well I'm getting crazy oh I want to help but yeah so yeah there's a lot you can do with this page even though it's simple if it's simple go crazy with it okay great job all right all right Wow am I missing anything here's a website um Evan please send your web flow dot IO link which isn't if I have interactions j GC g j says i think it may be CD unrelated because it seems after the first one it works it may be cash okay something that's probably something else okay i think i have caught up cool all right second half of the stream let's go back here so what does ryan our lead brand designer do so if you scroll down so he stacks it so it's a completely different image and he stacks it so it doesn't horizontally scroll but as you notice right here this scrolls left and right at the bottom for the year alright so that's what we're gonna do - we're going to stack we're just gonna stack and so it's not gonna do a horizontal scroll and the cool thing about interaction - is you can set interactions to happen per break point so the easiest way to do that is right here so in my interactions panel I can say trigger on only these two break points which is desktop and mobile and tablet cool all right so if I go here I scroll you see my animations happening everything's rolling left and right if I go here it's still happening move me to fix the text all right but if I go here I'm scrolling up and down nothing's happening oh no oh no what do I do so let's go ahead and start fixing everything for responsiveness all right Evan I'll if any other is questions or sights I will answer it after we're done doing the responsiveness of this okay so thank you for your questions and let's continue so this right here that's fine so I'm gonna move this out and I'm gonna put them back later after I'm done fixing where the text needs to be so this one right here I think we can move there guys Tomas and Yee oops I guess that doesn't if I don't do cover nope I need some space for my text let's play around with oh okay I can cheat this I can I can make the background black because it's already a solid black there we go so like that nope I don't want to move it yep there you go alright move it down a bit more so something like that and I can set this to black this is the same yep cool and now this one I can go ahead and push it up cool alright now that one's done let's go ahead and push that out bring in the next one I think that's fine you don't really see their logo but okay let's just go ahead and fix the background since we're here anyways right so no I want percentage there we go oh you don't really see ghee but it's okay the year guy I think it's key by halle pop thank you for joining us this week see you next week or Friday so that one's done that's going to move the next one this one I can move this one the text a bit whoa what just happened there we go cool because I don't want it to get on his helmet looks humming sir expensive oh no no no no no there you go all right move the section out to the next one last one and I think this one because it has the words are long I mean the line is long let's make this with like 50% there we go I want that break and guess we can move it up here so it's kind of lined up on his shoulder cool alright there we go so there we go responsiveness right there let's go ahead and preview and see what would oh I didn't put my sections back I got two got too excited there you go it's preview yeah and there we go we need to see Tom Tomas let me just move it a bit I can't really tell but I don't want to hold up the stream something like that just guessing look I took him completely out yeah that's fine all right let's just keep going now for mobile landscape and portrait we want to stack them okay so this wrapper right here I haven't set the Flex horizontal let's go ahead and fix this and go a hundred VH and set the height to auto and set this to vertical and lastly I'm gonna set this to static okay so that way I can scroll down and it's just a basic page okay okay also let's remove this right here so this scroll I'm gonna set that to display:none because we don't need that anymore okay and let's set all these backgrounds to fix now that we're not doing that horizontal scroll thing so I'm gonna set that to fixed up we're gonna have to fix some of the stuff so it's a more neat effect this section here I'm gonna set the fixed the section here and lastly now hmm I may have to put yeah I may have to put the text down here wait help them oh that's the end of the actual image whoops to have all no no no cool so I may have to put the text on his suit some nice suit okay so the backgrounds are fixed so let's go ahead and fix the titles move this up a bit this one's cool this one is cool I don't want to do a break on all because I look weird where the work all by it is just by itself so I guess it's fine alive is cool in this one I here let's just put it and push this down a bit cool one more actually no let's let's do interactions so let's so when you get here you get here the this should go away so let's add a new interaction on this section right here so I'm going to click on this section and on selected element so scroll into view when scroll into view you want to you want to see this album wrapper okay so called mobile interaction okay and I'm going to set the transform to zero and opacity to 100 okay because that's what happens when I'm in view of this section now when I'm out of view I want to do the same thing I'm going to duplicate this but I'm gonna call call it mobile interaction too but the move should go 100 pixels down and the opacity should go zero okay so let's see this happen goes like that okay and done now if I go here and scroll into view I'm gonna start animation I'm gonna do mobile interaction but instead of doing that the album title here I'm gonna do the album title here so I'm gonna select this nope select this oh I have to this album - okay cool sorry let me go back mobile interaction some good replace elements in the interaction so I'm gonna replace this with a class and this is going to be album number two okay so it's going to effect this one rather than the one up top and for some reason - in show up oh because I'm already showing that's the scroll interview and now I can do the same thing with interaction - but replace with class album no that's section - come I can't there we go and it should fade out there we go that's fade out that's your feed in alright let's see this happen so that shows up you can kind of see it happen you see a move maybe I should add a delay I'm gonna start delay real quick scroll into view and then delay should happen before a whole second okay and this affects both interactions that I just made not just this one there you go there we go it depends on how fast I'm scrolling so the thing that we're still working on is the thing we're still working on is offsets on scroll interactions and yeah so we're still working on that that'll come out soon and so I can just recently repeat by clicking on the section and you scroll into view and do the same exact thing replace elements with album three start animation replace elements title three there we go go here do the same thing let's go into view mobile interaction four and last one let's go ahead and do that whole interaction class number five whole interaction to class album five there we go and yeah that's it now we can go to mobile portrait and it should just work the same not much to change except for this right here it was good and fix this move it here there we go cool alright and I think that's it really simple so we just made it responsive in like 20 or so minutes back to art and oh wait last thing sorry the scrolling to view should only show up on these two break points so don't forget those and let me just double check yeah I have to turn it off on the other breakpoints so that way I don't break them okay last one fixing this yeah we're done all right and as always you guys can have this project put it on your own web flow dashboard and have fun with it use it as something you can build on top of use it as something to learn from it's yeah it's it's up to you what you want to do with it and hopefully you learn something today okay Michael hey welcome back Michael man that looks sick thank you so much I don't know if you're speaking about my project or something that someone else has done but yeah um yeah any questions about this project any questions about web flow or web design are you working on something in web flow that you want to show to the community let us know oh so yeah evan has runners up splash page all right what are you working on Evan ooh pretty cool kicks Bree I like that I like the the growing of that bar that's nice careful it's kind of twitchy or is it supposed to be like that not sure you know it's kind of weird on the hover or maybe it's just me you know why does it keep going in and out if I'm hovering it yeah it feels inconsistent good start good start so I like how here each of your slides has a different tilted angle okay maybe play around with that style on alert other elements on your page like for instance like this is this just a straight line what if it was kind of like you know maybe there's a little bit angled to give it some a little style but yet these texts are on a on a horizontal base line these if you're gonna have hover effects on your shoes maybe have hover effects on these these two boxes are to me or screaming for some sort of interaction to happen okay and then these two rows it's a really good start but maybe add some imagery to the back of it or make them angle make it kind of different yeah good start now I'm looking at your logo maybe there's a way to get elements of that logo maybe the the wolf's face or something that to be incorporated when you see how your lines on the wolf is very very or not organic it's very flowy so maybe stuff like that can be reused on this page because everything seems very straight lines okay so maybe try something different but it's a good start good start it's nice and clean oh wait someone said that they have a mobile thing oh I forgot to look at it whose was it I think those dolls yeah door I forgot to look at your thumb compatible here we go going back to duels page anyone said it's thumb compatible right yes right there nice okay so you only have three duel you only have three and um maybe these three can show up at the bottom okay when you click it maybe these those three links to show up at the bottom as a row because it'll be more thumb compatible good job alright what else what else scrolling back okay what about stopping the vertical scroll scrolling while you continue to scroll I did it with not sure what you mean Pedro yeah yeah if you have any other questions go ahead and put them in a live chat room right now or your links that your you know I show off and and yeah so while I'm waiting for those questions just reminder every Friday at 10 a.m. on a twitch channel twitch.tv slash web flow app well we go over some advanced topics and web flow have roundtable discussions with the community and maybe some interview someone who is in the web flow team right like two weeks ago we had Brent content strategist John Moore Williams and then before that we had our lead brand designer who did this ix to Page Ryan and yeah he told us how he did this he told us his design style where he can where we can find inspiration yeah so yeah get follow us on Twitch yeah Evans using a dynamic list of products and I can't use embed code correctly I try to fix it ah I see I see yeah Arnab has another web flow page you want to show let's go ahead and do that okay interesting cool parallax here we go oh wow okay so it's a background video and then overlaid on it is a bunch of SVG's and then he has this going and how did you even do this huh that's all that's neat and everything is parallax scrolling oh man oh man that is cool haven't you even how is that the thing is that on scroll or is that a background video okay it's a background video wow you have a lot of stuff going interesting that's a fun way to do a forum look watch out there he goes okay cool nice neat great job only thing I would hmm this scroll down font just seems very techie whereas all the artwork is very friendly but that's the only thing I've been Matt great job let's refresh this page in mobile okay so I guess it's not ready for mobile yet yeah it's not ready for mobile all right good start though good start all right Pedro you're working on a jkf festival page not found hmm okay send me that link again yeah you're Santos okay I'm gonna try again wait here we go whoo nice pattern okay okay we're doing something okay I feel like something needs to be here I'm guessing it's okay okay here we go this is kind of like the iPhone 10 um Apple page that's cool that's cool I guess this is just you're gonna have things happen there great job nope there we go mmm nice I mean by stopping the vertical scroll while continuing to scroll my loop while continuing stopping the vertical squirrel you've already done it like it looks like you stopped the vertical scroll but you didn't really yeah you did it right missing images or HTML video embeds okay yeah it works great job alright alright anything else oh wow I just saw this on Twitter right now oh go here I'm gonna show you guys some CSS Awards Saddam net yeah CSS Awards net look what's the site of the day Congrats to our lead brand designer Brian oh man he did it he did it site of the day interactions 2.0 oh great job claps and chat please claps in chat Ryan oh man tweet that out guys interactions 2.0 homepage just got site of the day all right and if there's no other links or questions we'll go ahead and yeah we'll go ahead and end this stream for this week so again I will see while this Friday at 10 a.m. I'll let you know what the topic is gonna be on the forums and yeah let's go through our usual closeout so if you need any account billing your technical help please go to university web flow comm slash contact and we and the I and the support team will help you out as soon as we can if you have any design or custom code questions or you want to just join the community please do so at forum web flow comm join the global community and get your questions answered there and if you get your ants and get your question answered pass my favorite forward and answer someone else's questions so we can all grow together this stream happens every Tuesday at 10 a.m. Pacific time as well as our twitch stream on Fridays at 10 a.m. a twitch TV slash web flow app you can follow us on twitter at web flow app or follow me at the pixel geek also on instagram it's at web flow app facebook.com slash web flow yeah that's it hopefully you guys learned something today and as always make the web beautiful see ya you

Channel: Webflow

Views: 30,312

Keywords: webflow, responsive web design, cms, web design, graphic design, web development, Workshop, content management system

Id: 05frGyjyZvE

Length: 93min 40sec (5620 seconds)

Published: Tue Nov 28 2017