Parallaxing Effect on Scroll in Figma

okay on today's tutorial we're gonna do parallaxing in figma um uh now the first caveat is that as of the time that I've done this you cannot do a Parallax or scroll detection with the mouse wheel so we will be using the click and drag to scroll and that's really the only way as of right now to achieve this effect but if you plan your storyboard out and use components it can actually be pretty effective and pretty slick so we're going to make something very similar to this where when you drag to scroll you can see we actually have some complex parallaxing happening we've got parallaxing in the image itself as well as the text going over top of the image and changing color so what you do is you basically set sections um in around your page height and then you just scroll like that and here you can see here's an example of the background image scrolling past the text so we have some examples of how you'd scroll a site like this and then we actually do one where we enlarge kind of like on apple.com the image on scroll and you can scroll back down or you can scroll right past it so this is the fun stuff we're going to be doing today and let's get into it um right on so I've put some basic Parallax the easiest thing to do is to have a layered image already uh so you know a couple of pngs one's trans one's got a um the part you want to Parallax uh cut out of it and then you have your background um I've just used a mask because I was doing this quick and dirty so you can see that I've got I just duplicated the image in Mass Delta the cabin in figma I don't recommend it it's kind of shitty but that's what we're gonna do uh that's what we're gonna use today anyway so to do the hero um first thing you do is create this put in a frame get it all set up the way you want it to look um and then we're going to create a component and the reason we're doing this is um that the parallaxing states are going to be held within the component and that reduces the amount of actual frames uh you have to create an edit later when doing your prototype um and then you know you're not changing multiple things in multiple artboards you're doing it all in one component so we'll call this cabin tutorial hero uh so the first thing so this will be our default State then we're going to add another variant and you know you can name it I don't I'm not going to for this one because I'm lazy but uh for this what we'll do is we'll create our Parallax state so when you scroll what do you want this to look like so I'm going to move this up about as much as I can I think I can only go to there um so that when you do scroll um the background trees kind of come down below the cabinet gives it that effect so that's all you need to do to set up your component and then to make it work this is where the magic is uh you create yourself an artboard we'll just do this real quick and your component that you just created okay uh and then duplicate it and then do your scrolled state so what I'm going to do is I'm going to move this up bear and then I'm going to change it to bearing 2. now all you have to do is make sure that these things are named the same because we're going to be using smart anime and I've been playing around with it it gets a bit tricky but I found that putting the action on a component as opposed to the page works a lot better I don't know so we'll go into prototype mode we'll drag our handle over to the screen I'm going to say on drag and we're gonna make sure it says smart animate I like to use 500 for this you can set it to whatever makes it comfortable and then we're going to take the same component and we're going to drag it back and set to on drag and then if you were to preview this you can see that as we drag our image parallaxes pretty easy stuff that's the basics it's all you have to do to get something to paralyze but we want to make it a little more verbose than that so what we're going to do is create a few more so we'll create another component um for uh where you have damage behind it so we'll just pick a size for this I'm going to make it 450 I think I got 40 inch colors on a 390 so we'll make that 310 let's do some quick stop and we're going to call this well Parallax Stone all right in this Frame we are going to add an image uh you can add an image however you want I use the unsplash plugin because it's easy got an interior um because this is a long component I'm going to want to portrait style picture so I'll just add that and then what we'll do is we'll set it and then we're going to make it just a little bit bigger because we want to give it some room to move okay and then we'll bring it down to the top and then here we're going to add some text feature name set that to the bottom right on and then you take this make this a component and now we can set this to be variable and then we will create our secondary State and all we do here is grab our image and drag it up that's gonna be a big Parallax but it's good that's all you have to do now that component is set up now the easiest way to make this a page that reacts to your scrolling is we're going to turn this whole thing into an auto layout uh I'm going to make it 390. uh we don't need any spacing or yeah we do it's putting them a we're gonna go down Center everything we're gonna put 40 gutters on all right now we've already got this in there so now we can go in and we can add some text I will say the homestead foreign colors uh that's good and then we'll start dragging in our Parallax cell component so now we've got that in there we'll break it up with a little better not some and just duplicate that again and now you can see we're starting to build a page up and then for these the nice thing is because we have it here we can call it warm and cozy and then all you have to do is switch this image up so again I'll use unsplash get an interior here's this one there we go get that again to give us some space and then we'll just call all right rustic okay so now we have our page now to make it so that that text goes up over top of the image what we're going to do is we're going to get the height of this which is 561. and then we're going to set this to Absolute position okay now that drags everything up behind it so what we'll do here is we're going to start independent padding I'm going to say 550. all right so that pushes that down we'll get it and then the other thing we need to do in our layers you want to make sure that this is over top of everything and you can test that by just reducing this padding to 270 and you can see it's over top it's going to go back to 570. and now we're ready to go uh now for this one we are actually going to wrap this in a frame and use this as our scrolling content so we will frame this selection and set the height to I believe it's 1884. click the content and we'll call it okay okay we're ready to prototype um one thing we're going to do first and this is to make everything super easy is we're actually going to take this page right in there this is our home page I'm gonna bring it over here and we're going to create a component and what that does is that means any changes to our prototype only have to be done in one spot so we will now drag our home component into here set it all up all right now with our home screen let me duplicate this and then what we're going to want to do is grab that full page component we're going to scroll it up a little bit maybe it there and then we're going to reduce our padding to bring that text into the image so I think maybe if we go 470. 3 this is kind of just a almost there we go and then we'll actually make this text White and then the important part like we know we take a component here and we set it to its scrolled state all right that's our first one so again we'll grab make sure you click on the home component because that's what's going to scroll we are going to drag it to this page and drag smart animated 500 perfect and then what we can actually do here is the end of this home screen one that when we duplicate it it'll automatically number it for us and then on this one so you can scroll back down grab it and then we will put on drag so now let's go now when we dragged you can see look at that beautiful text goes over the image our image parallaxes and you can drag and scroll amazing so now to keep going with that you can take this duplicate while this is here you can just pick that drag interaction and bring it to the one previous uh and then move your screen up to the next next uh section you might want to do it so that it's you know the height of your phone that's totally fine if you want to do the math I'm just going to do it by by eyeballing it we're going to move this up to here and then I'm going to make sure that I click on this component and set it to its World state and then we'll grab this guy we'll take him over here if I drag this one's already going back I think so we're in good shape and we can test it so that's still working now if I keep dragging up look at that we scroll and our image parallaxes with the scroll and we can scroll back and we can scroll back now you've got a scrolling page a parallaxes incredible if you use figma mirror app on your phone this works really well looks awesome you'll impress all your clients uh and then the last thing we can go into is that expandable um the expandable image um we don't have to do it I can show you how it's done but basically what we did is I made a component in its shrunken state and made a variant that is the exact height and width of the phone or the screen and then much like you did with these you have it in its state one and then on the scroll to page you simply set it to its variant two and it will animate so there you have it parallax in Sigma with drag to scroll I hope you enjoyed it if you have any questions leave them in the comments uh like the video subscribe check out my other channel and uh hopefully this is helpful and we will see you next time thanks

Channel: Darren Northcott - Figma, UX & UI

Views: 39,299

Keywords:

Id: MR5bDbhEd9A

Length: 17min 31sec (1051 seconds)

Published: Tue Jan 31 2023