How to Webflow: Creating scrolling interactions like the Apple MacBook Pro page - Tutorial (2019)

everyone welcome to another how to web flow in this video tutorial I'm going to show you how to create two of the scrolling interactions on the apple macbook pro page now here's an example of what I'm talking about as you scroll down you have a photo that grows on the width and then you have another photo that overlays and then scales and then you have another section where the photo grows again and then the laptop image swipes in all right so this is a very advanced tutorial okay but I'll try to do my best to break it down as best I can but one thing you need to know is Z and X if you're not familiar with Z and X it's just basically layering elements on top of each other so everything starts at zero and if you want something on top so it'll show it'll be on top of each other so zero and if I want something at Z and X 1 it'll be on top of that if 2 and so on and so on but you can also do negative Z indexes so you start at 0 and push something back negative 1 negative 2 and so on alright that and also you need to know a little bit about positioning position relative and position fixed and what's the difference between them it took me a while to figure this out myself I really challenge myself it took me a couple of days and a good number of hours to figure it out and I got it to where it's simple enough to teach well simple is relative but let's get to it all right here we go let's do this so first thing I do is put a section for all of my dummy data so I'm going to add a container let's call this section dummy data and set the padding to say a hundred on the top and bottom now we get this container and we'll put a rich text and let's just add four of them so we get some scrolling action happening all right now that we have this we can go on to make our first section there we go so we add a section here and let's call this a scroll track okay so scroll track meaning we want this to be the thing that when we scroll down we have a position sticky set on it so I'm going to set this to a hunt 300 VH which is 300 times the viewport height so as I scroll down I want something to stick to the top of the browser so to set that up I want to set this one to relative all right now let's go ahead and put a div block inside of this and we'll call this the sticky okay so this is what's going to stick to the top so I'm going to set this to position sticky set to zero at the top so as I scroll down this sticks okay okay we got our sticky going alright next let's add our photo so I'm going to set a div and I'm going to add a photo and call this photo let's call this headshot one I don't want to reuse the classes I've already used in my previous tries so there we go headshot 1 now this headshot 1 I want to make sure that it's 100 V W and 100 V H and we'll set this background to cover and I'll choose the image of that person set it to center no-repeat all right and also let's make it fixed all right so when I make it fixed I get that curtain effect all right ok now we can start with our first interaction just to show you where we're going with this so gonna go back to scroll track and add an element trigger of while scrolling into view I'm going to create a new interaction call this track one and we're going to target the headshot one and I'm going to set this to size and the width we're gonna start at 80 V W which is viewport width and 100 V H viewport height and we're gonna end with 100 V W and 100 V H now I want to start that and well so if I play this if I lie free view it that's kind of what we want but it's going to slow so we need to make it faster so I'm gonna set this to 10 0 to 10 so if I play it there we go okay but I want that to happen a little bit later so I'm gonna set this to 20 and set this one to 10 if I preview it there we go it happens a little bit later all right now let's go even further so notice how it's stuck to the left but the but the Apple page actually starts from the center so how we fix that is we go to the back to the Styles tab and we click on Center so now if I play around with the width it's starting from the center okay so let's go back to our interaction and check it out cool that's it so that one is done let's go on to our second one so let's go ahead and add another and we're gonna call this a laptop one okay this is first image of the laptop and we're going to also set it 200 V W and 100 eh and we'll go ahead and set that to the background image of laptop okay so I'm scrolling down so it's image of the laptop for this one I'm gonna set it to contain centered no-repeat right and not fixed okay now obviously this is broken okay if I even if I set this to fixed it's broken because what I've learned is that if I go to scroll track go to the interaction and say I want to from here 20 I want to set the scale of this because this is how we're gonna zoom in I'll set the scale of this to 1.6 and then at 30 I want to scale it down 2.7 watch what happens that doesn't seem right it's like that weird reveal and so what I had what I learned is that this needs to be fixed this needs to be fixed to the background okay so I'm gonna go back to my Styles tab I'm gonna set this to fixed set it to full and set the z-index to negative 1 that way this is behind everything all right now if I go to my scroll track we have a couple of issues here so it's kind of working but not really so the head shot doesn't go away and the laptop is scaling as you can see in the background but yeah it's not right so here's how we fix this I'm gonna set this one down to 100% I'm just gonna put them down here for now I'll get to them later so for headshot one what I'm gonna do is I'm going to set it up 30 I'm gonna set the size to 100 V 8 V W on the width 100 VH on the height and then at 40 I'm gonna set the size to 100 V W and the height of 0 V H so that way it does that curtain effect all right and then after the curtain effect we'll start here and do the scale from say 40 to 60 you to preview it and there we go now the other problem is I can see this photo so how do we fix that so we need to wrap headshot with another div so I'm gonna drag in a div block and put the headshot one inside of here and I'm gonna call this headshot wrapper and all this is is just a background image or sorry a background color of white all right and this one is also going to be 100 V W 100 V H and if I go here preview see how that's covering it now but there's still the problem of where's my content the content is blocked so yes it's getting a little bit complicated now but stay with me so for this dummy data I need to put this on a higher z index and the only way to get to a higher the index and to activate z-index is using one of these positions so I'm gonna set it to relative and set the Z index to one we're almost there now how do we hide that laptop well this dummy data also needs a color of white and there we go so if I preview now this is white background this is white background that grows and there we go now we got to find out what happened to our laptop so what happened to our laptop photo is that the headshot wrapper is not moving it's not moving away so what we need to do is take this headshot wrapper and at while headshot one is going from a hundred VH to zero I want to do the same thing with headshot with the headshot wrapper so at 30% I'm gonna start out with a hundred VH and then at 40% I'm going to set the size to zero V H if I preview it now we have that effect whoo all right it's the last thing last thing this needs to move up so I'm gonna take my dummy data go back to Styles panel and copy and paste it and I'm gonna put scroll track in between the two pieces of dummy data so that way as I scroll down the dummy data over legs so if I preview go back to track one on the interactions there we go and now it goes like that so we need to move it going up so what I notice is that when I get to about 75 things are starting to move up so for laptop 175 okay keyframe 75 I'm gonna start the why of move to zero you can start at zero and at a hundred percent I'm going to move it to negative one hundred percent so negative one hundred means going up positive 100 means going down all right so I'm gonna preview that and there you go all right that's the first one for me in the first two now the next section is a bit easier so what I'm gonna do is copy and paste that section as well as the dummy data that goes under it okay so we're doing it twice all right but let's change a few things so for this scroll track leave it the same but actually let's well actually we'll keep that there for now but the sticky we're gonna keep that the same we don't need a headshot wrapper in this one we can so we can move this out delete the headshot wrapper I'm going to duplicate this class and call it headshot two and change the image to the other woman and for laptop one again I'm going to duplicate the class and call it laptop to change the image to the different laptop photo there we go now the only thing I need to change for this section is actually this right here instead of having it fixed on full I need it to fix on the right because I want to do that swiping effect and so if I set this to Z and X 0 you can see that swiping effect even even if I just do this okay and oops the background needs to be set to cover CA that gap right there set the cover there we go and so I want that swiping effect by having this anchored to the right so it's gonna go like that from 0 to 100 from the right okay so I can keep this as a hundred if I want now or zero doesn't matter what's gonna happen is our interaction is going to call the shots okay so that's all I need for now let's go to our interactions scroll track track one and let's duplicate this okay so we have it duplicated now we have tracked two headshot one headshot one so I'm gonna hold command and select everything that's headshot one right click change target and select headshot to okay and now I preview it it does that thing I see the laptop is still behind there and I'll show you how to fix that soon but hold on okay and so it's wipes away again and now for laptop actually headshot wrapper we don't need that because we're not using it in this section so I'll deleted them both now laptop one I'm going to hold commands like them all right click on one of them change target and select laptop to okay now actually laptop - it doesn't need a scale so actually I'm gonna delete that all right so in a delete laptop to delete laptop - but with laptop - still selected at 40 okay or actually no let me preview this mm-hmm okay so we don't need this - swipe up actually we can take headshot to delete both of these so at 30 with laptop to selected I'm going to set the size to a width of 0vw and then at 40 I'm gonna set the size to 100 VW okay and there we go move up awesome alright so one last thing if I preview it let's see how we're doing looks good looks good looks good oh it actually works oh wow okay oh yeah because I move this up yeah so we're done okay hopefully you get it it's a lot of z-index a lot of fiddling but the power of no code you're able to create the Apple Page interactions I mean this is just Lodi right here if I got the video file for this I can totally put Lodi for this but that could be Lodi as well but this right here this right here doesn't look too hard anymore and they're just reusing that same thing over and over see that's the same thing that's the same thing yeah so yeah have fun with this I'll let you clone it have fun alright that's it for this tutorial hopefully you've learned a couple of things I'm gonna let you clone this because this is a very very tough one so go ahead and clone it I'll put the link below and just reverse engineer it or use it for a future project of yours I don't mind have fun with it go ahead and leave a comment below about with feedback about what you think about this video or if you have a future tutorial suggestion if you want to if you want to support me go ahead and click the subscribe button the like and the notification bell follow me on twitter it's at the pixel geek that's about it thank you so much for watching I'll see in the next one and as always make the web beautiful together see ya

Channel: pixelgeek

Views: 13,476

Keywords: webflow tutorial, inspire, pixelgeek, web design tutorial, pixel geek, design, apple, webflow, graphic design, web development, apple macbook pro, webflow tutorial 2019, learn

Id: D0LbpJXT244

Length: 19min 54sec (1194 seconds)

Published: Mon Nov 25 2019