On-Scroll Reveal Animation with React & Framer Motion

yo what's up guys so today we're gonna check out how we can make this reusable reveal animation like right here the animations only happen whenever something Scrolls into the viewport and we're gonna do all of this using react and a package called framer motion if you've never used framework motion before here are the documentation for it just Google frame in motion or go to framer.com motion this will give you an overview of everything we're only going to be using one or two things but this is a super super powerful library for animation specifically in react quick side note before we get started if you want this entire portfolio template so all of the code for this whole thing not just the code for this animation you can actually get all of it for free on my gumroad this is set at zero dollars obviously if you want to support me feel free this is going to come with both a JavaScript version of the entire thing a typescript version of the whole thing as well as a link to an unlisted video here on YouTube that's like 20 minutes long that walks through all of the code you can also come in here and just get a live version of this it's just hosted on for sale we'll show you how to do that as well in that video um but yeah I just figured I would make this template available available to all of you guys as a learning resource and of course if you want to use this for your own portfolio you know you can take it and kind of remix it however you want and make it your own I'll have a link in my description to this gumroad page as well as to the live version of this anyways that's enough of this let's go ahead and get started with this animation so go ahead and ripped out all of the kind of fun stuff that's in this animation we can go ahead and write it all from scratch I did leave a little bit of a kind of framework for this component just because it's already wrapping a whole bunch of stuff in this project already if you've downloaded this you should be able to see these all over the place they look something like this what you'll notice is in my props I'm using props.children so if you're not familiar with this this children prop you'll see I'm typing it in typescript as jsx.element if you got the JavaScript version obviously this won't be here but all that that represents is whatever is passed inside of the element like this so This H1 for instance is going to be passed in as the children prop for that reveal I'm also passing in width this is just taking two different types either fit content or 100 and the reason that I'm doing that is for some of these different elements for instance this text I want it to be fit content but in some other places I might want it to be 100 of the full size of the element um and that's just because of the way that the uh that kind of like little green screen thing that that's not a great way to say that but the little kind of slide animation that comes in and out um I would like to be able to set that to the specific width so if it's you know for instance this I don't want it to take the full size of the entire container that it's in I just want it to be over the text here um so yeah if you're testing that you can go ahead and remove that play around with it and see what the difference is but I went ahead and just made this a prop that I'm passing in made it a little bit easier for me so those are the props and that is the basics that we're starting with now the first thing that I actually want to do is I want to change our component in here to use one of these framework motion components so essentially our frame promotion is going to work is this motion thing that I'm importing here from frame motion at up is going to allow us to prepend any just normal elements with motion Dot and it's just going to give you essentially a super powered version of an HTML element so for this div for instance I'm not doing anything on it right now it's just going to act as a normal div but what this is going to give us access to is a couple of different props that we can pass into this diff so for our case kind of the first most important thing that we're going to want to Define anytime we're using framer like this is our different variants or kind of like our different states of an animation they call those variants so I'm going to go ahead and pass in a prop called variance and I'm going to set that equal to an object like this and we can name variance whatever we want so for our case we're going to want two of them one we're going to call and say hidden this is going to be the initial state of how we want our element to look so for ours we'll say opacity of oops of zero and say a y so like a y translate of 75 pixels you could call this whatever you want you could call it banana you could call it cheeseburger you could call it you know start whatever for mine I'm using hidden and then we're going to want to transition that to something else so I'm going to duplicate this down and we'll say maybe visible and that's going to want to go to an opacity of 1 and a 1 y translate of zero now you could have a whole bunch of these in here with different states if you wanted that you know could be triggered by different things but for ours we just have kind of this initial state which is the element is off screen or before the page is loaded and then this is whenever the element comes into the viewport now obviously if you see we refresh nothing is actually going to have changed yet because just because we've defined these variants does not mean that we're actually triggering them yet these animations down here are using a different thing so ignore those but everything else um in order in order to actually trigger those I'm going to come back to our motion component here we'll add a new line and the prop that it's going to expect for your kind of initial state is just called initial this is going to take a string which is going to map to one of these keys so for our case it's going to be hidden of course typo again so hidden here is mapping to Hidden here if I wanted to start it visible for whatever reason I could start as visible and then move it to Hidden later or whatever now for our animate State we're actually going to change this in a second but just for demonstration purposes I can pass in another prop here called animate this is going to work the same way I'm going to say visible like this and now if we save this and I can go ahead and refresh our screen we should get our first little bit of our animation right so we're seeing that this kind of pops up into view whenever something happens or whenever we refresh the screen but as I scroll down you're going to see that as new stuff enters the screen it's not then animating into the screen we'll fix that in a second but before we do that I want to add one more thing which is a prop called transition see that pops up there and this is just kind of our transition properties so things like duration delay which is exactly what we're going to add here go ahead and pass in a duration of in our case we're going to say 0.5 seconds and a delay of 0.25 seconds the reason I'm adding this delay is because in a moment we're going to have that little green thing kind of like down here to do add slide div thingy thingy can't even spell thingy right still not spelling it right project thing I want to run this before I run this animation so I'm gonna have a little bit of delay on this so that our next animation can fire first and then it says a little bit delay on it but anyways yeah so if we save that should still work go ahead and refresh this so we can see it again takes a little bit longer now and now all that we want to do is somehow control whenever this animate visible happens and uh we're gonna get we're going to need a couple of things here so we're going to need use ref and use effects from react as well as use in View and use animation which they are all just react hooks uh from frame of ocean first things first we're going to need to add a ref to our div here and we're going to use that in tandem with this using view hook to tell whenever our element is in view so we can go ahead and Define that we'll say a const ref oops const ref is equal to use ref and we can just initialize that as null and then come on down to our wrapping div here and set that ref here so right now this is doing nothing we're just setting a reference to this uh div element here what this is going to allow us to do though is under our rev we'll say const is in View and what this is going to do is going to use the if I can actually type it right this use in view hook in this using view Hook from frame or motion is going to expect some ref so the reference to the element that you're wanting to add this kind of a intersection Observer on as well as optionally some parameters in our case I just care about one of these which is once sorry about my dogs in the background and we're going to set that to true if you didn't set this once to true then anytime that you kind of scroll up and down this is going to continue firing on and off and uh flipping this Boolean back and forth we just want the step in one time though so we can go ahead and demonstrate this actually logging we'll say say use effect and then use effect just as normal we just want this to refire anytime that is in view changes and all that we need to do here is just say we'll just say console log for now is in view go ahead and pop open our developer console here delete this refresh so we can see what's happening and we don't really care about that either but point being here is if as we scroll down here and stuff starts to come in view you'll see you'll start getting more logs here so we've gotten three of them I've logged so far as we keep going more things come into view you're going to get more and more logs because I have this wrapping a whole bunch of stuff now obviously we don't just want to be logging here we want to actually be doing something so super quick so we can go ahead and change that all that I need to do is go ahead and I'm going to replace this console log we'll say if it's in view like this and we want to say fire the animation another way that we're going to do that is relatively straightforward as well oops accidentally imported an extra thing here I think and uh we get this use animation Hook from frame motion as well which is going to give us these things called controls so uh we're gonna need two of them so I'm gonna call the first one main controls set that equal to this use animation hook and then all that we need to do with these controls is down here wherever we're adding our variant for animate I could just replace that with our controls and this is going to give us access to manually set through code when we actually want to transition from one state to another so if I come in here and I say main controls click dot we're going to see we have one called start and start is going to take a string which maps to one of our variants so in this case we'll say visible so visible here is mapping to visible uh here rather and now we should see I can go ahead and get rid of our console here as I scroll down stuff comes into view this code fires and everything starts to kind of animate in and that's pretty much the basics of it so now the last little thing that we need for this specific one is uh that little kind of green thing that I've stubbed at here the first thing we're going to need for this is another set of controls so we'll call this say slide controls that's going to work the exact same way as our other controls here and as opposed to writing all of this from scratch I'm just going to copy paste it and we'll walk through it because uh kind of trivial but a lot of code so just go like this or not a lot of code 15 lines maybe uh but yeah so here's that code I just have our motion.div here has a couple of variants in the exact same way I'm calling them both also hidden and visible starting at a left of zero animating to a left of 100 using our slide controls set initial to Hidden I have this little transition here again we have a duration of 0.5 seconds here and then delay here so that it comes afterwards and we're essentially just setting this absolutely to this outer div here with the position of relative and if we go ahead and save that we'll see that that now has this kind of green slide thing as we scroll down both of these are scrolling whenever things come into view and we have our finished animation you can use these exact same principles create all kinds of cool stuff feel free to check this out again you can get this whole project on my gumroad if you want to see the actual code for this as well as a bunch of other code there's JavaScript versions if you're not familiar with typescript typescript versions video again covering all of the code walking through all of it how to launch it on for so all kinds of fun stuff so check that out totally free and I will see you guys next time peace

Channel: Tom Is Loading

Views: 105,825

Keywords:

Id: hjbxaYTMhy0

Length: 10min 39sec (639 seconds)

Published: Tue Apr 18 2023