in this webflow versus framer challenge we're giving our webflow and framer masterclass instructors just 2 hours to take this design from figma and turn it into a fully functional web page in the web floow Corner we have the founder of flux Academy ran seal and representing framer Canadian design and Matt jumper framer or webflow which will come out on top okay ran you've had you two hours can you show us uh how all you got with your web flow build let's see the the live website and under the hood as well so let me show you what I've got so this is basically the site I've got most of it done um got the scrolling section horizontal scroll I got the gallery with you know the interactions here going on and I've got the newsletter I didn't get to do the the footer it had kind of like the figma file header revealing footer at the end of it where was it somewhere around here I didn't get to do this but I I wanted to spend a little bit of time trying to make this responsive uh which is quite okay it's not it's difficult to see here um how it works and it's not amazing uh the figma file didn't had an actual design for it to being responsive so I kind of try to wing it and this area here you know with this inverted Corners it's didn't really work in responsive mode but I tried do my best and again for two hours I think that's quite all right managed to do most of it right over to frer Matt show us how far you got in two hours with your build all right so I have this in browser and I'll show you how far I got um so unload we do have some animations um I have all the layouts done I spent more time on this on desktop and actually decided um not to do responsive just cuz near the end I had a few minutes left and I just decided I'd rather kind of like Get desktop finished and then you know how I would actually build this is like get desktop finished and then move into the responsive States instead of um doing responsive and then going back to desktop and like going back and forth this workflow is just better for me I know it maybe it made more sense to like try to get as much done as possible um but I just decided to to do a bit more of the the fine-tuning on desktop so got the animations done on on the um Landing here and then on scroll as well got the navigation uh going away I got these uh hover states on the on the links um and then as you scroll this image uh reveals itself through the mask and this Arrow here um also Scrolls you down as you get here I actually have a um this is using a component and I have a little bit of a parallaxing effect sideways which I don't know if I've actually seen before um but instead of a scroll speed I can get into it later I'm using some transforms um and yeah we get the three of these some sticky elements then as you scroll down get to the gallery can just a little uh um intro animation on this image here and then the hover States on these guys it changes the image and then if you Mouse away it stays in the last one that you hovering um and then we have the newsletter which I did um the did get this um arrow button here and then at the bottom we have our reveal footer and the same uh link covers I did get the the rounded corner here I didn't have enough time at the end to make the body back around that same color so this is buggy me where you over scroll and the um that doesn't have the same background color but I didn't want to cheat and add that after the timer's done ran how about that horizontal scrolling section for you is is that the kind of thing that's quite easy to do in webflow yeah the horizontal scroll is is nothing uh too complicated in web flow basically what you do is you create a like a really wide um a really wide container a div like in this in this case what we have here this horizontal scroll wrapper it's just very very wide and uh what happens is that uh it's basically it's it's sticky you want it to to stick to the top and it's basically within uh you know it's this section basically Clips it um so you can see here overflow clips that basically means that everything is cut in you know the size of the screen but because it's very long I create an interaction on this section you can see that we have a little bit of an interaction going on here while page is scrolling basically as we are scrolling you can see here um as we are scrolling basically you can see here we're basically moving this horizontal scroll um element we're just moving it as we're in the scrolling so it's it's pretty straightforward in in we flow to create that this setup is a bit unique because web flow is great for uh um as Ron is going through like he can do the the side scroll the horizontal scrolling in framer um this is the one thing that I would love for them to do is actually add the um percentage based scroll transforms because right now you can only use like fixed values so I technically could have done that and it would have looked on on desktop but it's not how I actually would have built it because it's not like properly responsive so I went down the route of using scroll variants so on this component here I have a scroll variant and then it basically I have these trigger points to change um each of the variant so inside here I have the first one and also this this works with uh groups of three so it was actually lucky that there was only three um uh three cards in that in this layout so I have the three components here and basically what I did is actually made them all 80% width of the container that they're in so that way it's always um just peeking in the next one and then this is all in in a in a layout here for this variant one it's using a layout and it's aligned to the the start right now or distributed to start and then the second variable or variant um it's distributed to the center so then now it's taken all that content and aligning it to the middle and then the last one's to the end um so it's just shifting all this content and then in here you would have seen in the in the um uh time-lapse I was using different colors to actually see how these are kind of set up but basically these are um spacers with uh viewport Heights to basically like trigger the the changes of the variant and this is all a um inside of a sticky container so a bit of a a hacky approach to do it but it it got the job done nonetheless were there any particular parts that were challenging things that you know slowed you down during your two hours little tricky parts I mean the things that are not super straightforward are how to do these inverted uh Corners because you know you have this one image um but then you can't do an invert uh corner here you can give an invert uh corner you can do a round corner for this element here as you can see here this one has a round corner but to create this one I actually need to bring in this element like in this case I brought in like an SVG of this uh Corner that is basically here and here these so these are I would call it fake round corners these are not actually round corners so this is just a way for me to hack this and this also happens here um because there's no actually straight you know maybe you can do this with custom code but I just wanted to do things very very fast um I could have also brought in this whole shape as a mask but then it wouldn't be responsive so this is actually the first time that I'm doing something like this and this was uh you know a little bit of a challenge for me all the animations um the these were all really quick and didn't take any uh didn't really take any brain work to like figure out how to do it because I've all I've done these all so many times before um this is just a simple perer effect uh because it's in the top of the hero so as soon as uh this page loads these uh these text elements are just moving down from 120 pixels and just using the transition just adding a delay to uh each of these by offsetting them 2 seconds um so yeah pretty pretty straightforward we have this H1 uh which is basically acts as a wrapper um to the actual text inside and this one has an overflow hidden so what happens is when we have this text inside and we're animating it or moving it in this case let's say I'm moving it so you see it's being cropped because you know the the div that wraps it is basically act acting as a mask so what happens is I'm just animating them one after the other and that's basically how they mask out so that's also pretty straightforward same thing um that I think Ron uh was uh getting into the uh input here in framer this is behind and then basically what I did is I have this frame with the arrow inside of it so I'll hide it so you can see so I have I still have the a button here that says go and then I basically just put a frame on top of it I positioned it absolute and then just like gave it a pixel of uh buffer on the side so we still have the focus State and I set the uh pointer Vents and the user select To None I always get these two mixed up I I think only one of these was needed to basically make sure that you can't select this item and it's basically just uh when you click on this you're actually clicking on the button below um and with the all the spacing basically I I took the time to make sure that this uh line is underneath the name and email then when you click on it we actually get this padding um so the focus State isn't like right to the edge and we still get the border around it would you be able to create a rollover State on the Arrow given the way it's set up yeah for sure because I can always create for this hidden button I can create an interaction I can add a hover a mouse hover interaction and then refer to the arrow in that interaction so I I can't create an animation for that that's pretty easy I think you know I love web flow and I think this this demo shows that pretty much you can achieve whatever you want even if something you need to hack and don't come out of the box you can do it and I still haven't used any like custom code for this so I'm pretty happy I I have to say that I love what mad did when it comes to the interaction and as I said there was open place for interpretation and I love that he created something that looks really really smooth so you know everything works whatever you whatever tool works for you uh works I love working with web flow and as you can see I could do something pretty accurate to the design but both tools could do great job on this project you know framer is known for its speed and I thought that you know I mean Ron went for the responsive States and I went for like more refinement of the desktop I feel like I would have expected those roles to be reversed where like framer gets everything done faster and then web flow is like more of like that that upfront build and then like the speed comes later um so I I'm impressed with how fast um Ron got it done so uh cheers to him let us know in the comments which tool you think won the day and if this has inspired you to check out either framer or web flow then you're in the right place start with our crash course videos here on the channel and go from there until next time happy designing and developing