The Framer Motion Crash Course || React Animation Library 2023

animation take your website from boring and sad to not boring and glad for react developers you really don't need to look much further than frame or motion to add interactions and animations to your websites whether it's scroll based animations hover and click effects drag controls layout animations or literally anything else frame declarative API lets you get up and running in just a few minutes limited really by just your imagination today we're going to cover just about everything that you need to know to get your feet wet making clean springy interactions guaranteed to finally get your website up on Mom's fridge for all of her friends to see anyways that's enough from me let's go ahead and get started and we are live what's going on guys so just really quick we'll take like 2 minutes before we actually get ready any code just to talk about prerequisites and what we're actually going to cover here um as far as prerequisites the only thing that you really need to know before you actually jump into this is basic react skills so if you understand how to take something create a component put it on a page with uh and understand props with basic react that's really all you need to understand as well as kind of basic CSS you don't need to be some kind of professional front-end developer or anything this is going to be very beginner friendly tutorial uh so long as you understand you know your basic CSS properties you understand you know how to put some text on the screen with react make it purple whatever you're you understand plenty enough to be able to understand what we're going to go over in this video as far as what we're not going to go over in this video um or well first I guess what we are going to go over in this video uh I'm currently on their documentation so this is framer docomo and you're going to be able to find the same documentation that I'm looking at most of what we're going to be going over is this motion component this is kind of like the atomic unit of how framer motion works you'll see this look kind of like normal jsx or normal HTML except you have this prepended little motion thing here and you're just defining declaratively your animations directly on this uh component so like on your jsx if you're used to something more like green stock animation platform or something like that most other HTML or most other JavaScript animation libraries uh that's not generally how most people use framew motion they do have a way to do something like that so like if you go under hooks go to use animate you're going to see something that looks a little more similar to something you might be used to too we're not going to talk about that in in this video in fact we're not going to talk about most of these hooks I'm not going to talk about using view or actually I am going to talk about using view but I'm not going to talk about use drag controls use animation frame use reduce motion most of these hooks up here besides use scroll and use transform and uh a handful of other things here like we're not going to talk about reorder we will talk about this we won't talk about this all of this just to say if you do want more advanced kind of level tutorials I do have more of those on my videos on my YouTube most of my videos are actually about different kinds of animations especially the last probably months worth of stuff the last you know eight or so videos as well as if you're watching this in the future I'm sure there will be many more and most of these are breaking down significantly more complicated effects probably than what we're going to be looking at in this video and uh it's a good place to go if you want to start making more advanced stuff I also have a website called hover.to top of react frame motion and tail one CSS this is just a big component library with all kinds of different components that are all animated so some of these are free some of them are paid you can find like come to the hero sections or whatever and see you just come and click code and grab all the code for this break it down use it in your own projects and it'll show you how stuff like this works whether it's like a hero section or a pricing page or buttons or cards you can see all the kind of different stuff we have over there uh again a bunch of this is free if you do want to support me the absolute best way to do this is by grabbing a copy of hover it is only $37 for a lifetime subscription I'm adding more components to this all the time like a handful of them every week and not only is a good place if you're trying to build a website but I think it's an awesome place to learn like a really large amount of the feedback that I've gotten from people is that they're really just using this to break down the components understand how they work so that they can kind of iterate on top of them and build other stuff that said I'm going to stop plugging this and we can go ahead and start writing some code so let's do that so I've already set up a barebones react project you should set Yours up however you want use an existing project totally does not matter I'm using a pretty Bare Bones nextjs project um but it that's totally just my preference if you also use nextjs I just made a basic project and I ripped RI everything kind of all the initial stuff out so in my index route you'll see I've added some components I'll talk about those in a sec but ripped everything out of that ripped out kind of those home modular or module CSS files ripped out the API um and I'm just left with a completely Bare Bones react project with a couple of components up here which I'll show you in a second as far as dependencies I've just gone ahead and installed framer motion so if you're using yarn or npm it would just be yarn add frame motion or npm install frame motion or pnpm or whatever you're using just make sure that you inst inst a package into your project called frame motion and beyond that I think that that's basically it um I'm going to be doing most of my Styles in line just like with inline CSS I will Circle back to this little tiny bit this little example button class I mean you can copy this right now if you want uh but I want to avoid spending too much time writing styles in this I want to just focus on the uh actual frame or motion stuff itself so we'll we'll cover a little bit of this in a minute as far as the components that I've already made I just wanted to make sure that I had I'm going to go ahead and close these up just wanted to make sure that I already had everything that I wanted to talk about kind of figured out so don't worry we're going to rewrite everything but I am going to call this out now because if you do want to follow along directly with the project I have all of the code that I'm going to write in this tutorial already broken out into components and these will all be on my GitHub so you can go and open that up and look at the code there just to make sure that you're not missing anything if something's not working you should be able to go and reference the way that I'm doing it on my GitHub so Link in the description for that uh let's go ahead and actually get starting writing some code though so the first thing we're going to cover um oh by the way I am in my basics of motion file so if you did go ahead and open up the uh GitHub or clone the GitHub this is the file that I'm in I've just removed everything besides this wrapping div um but yeah so as you can tell by the the name of this file let's just start by going over the absolute basics of how frame motion works I have some super basic kind of stuff in here right now and we're also going to need that CSS class that I mentioned a second ago so I'm I'm just going to add a button here in a minute if you do want to copy this go ahead and copy this now I want to try to not spend a whole bunch of time again stopping and actually talking about style stuff but this is just also not necessary I just wanted to make sure this button didn't look completely terrible I just added some background some uh color font size blah blah blah so copy this if you feel free uh pause right now 3 2 1 okay we're back and over in my component all that I have so far as you can see is a div with some inline Styles all that I'm doing is giving this a display of grid placing content Center giving it the height of the size of the screen and then giving it gap which we'll need in a second just to make it look a little bit better uh the whole point of this this has nothing to do with the framework I just want to make sure everything is centered in the middle of my screen over here so that uh you know I'm not making guys look up here in the top left corner um that just feels weird so we're just putting everything in the center of the screen that is all that this is for now the first thing that we're going to animate we're not going to do anything super fancy I just want to start with a basic box so I'm just going to come on in here and I'm going to make a div just a basic div and we're just going to give this some size and make it so we can see it so I'm going to go ah and make some Styles here here again just using basic inline Styles I'll give this a width of we'll say 150 pixels we'll give it a height of 150 pixels just make it a square and then some background color I'll just go with black that should be fine and there we go sweet we have a box on the screen now what we're going to talk about to start is what I like to think of as like the atomic unit of how framer motion works and that is what's called the motion component so I'm going to come up to the top of my screen I cannot type and I'm going to import motion from framer motion and this is a really cool component I really like how they made this work because all that you have to do to start adding your animations is prend motion to any uh like default HTML element so I can come down to my div down here and I can just say motion. div and for all intents and purpose this is still a basic div like this still going to work you know you can add your Styles you can add whatever props you would normally add if I also wanted a motion. button you can do motion. button if you wanted an anchor tag you could do that if you wanted a list item or whatever an unordered list this will work with any HTML element so long as you just prepend it with a motion dot so to start adding a basic animation so we what we'll start with is I just want whenever this page mounts I just want this box to rotate that seems like probably the easiest thing we'll just do like 180 degrees rotation and there are a couple of props that are added whenever we add this motion dot to the beginning of our HTML Elements which let us Define kind of how our uh the different states of our animations work and we call those variants uh and the first two and kind of most important variants are the initial variants I'm just going to start by doing this this is going to take in an object and the animate variant animate really is kind of the most important one oops animate and how you can think that these work is that these are just going to take in the same kind of props as what your normal style tag is going to take so I could add any normal CSS uh selectors in here like I could do you know background if I wanted I could do color I could do margin I could do uh translate they also give you some short hands like they give you X instead of having to do translate X stuff like that which is kind of nice uh we won't go into all the specifics of that but for like I said for right now we're just going to start with rotate so I'll go ahead and add a rotate of 0 degrees and this is going to be the initial State whenever my my component first mounts right and animate is going to be the state that we want this to animate to so whenever I want this to mount I want this I'm just going to copy P paste this down I just want to start by rotating this 180° oh cool and we'll see we already got something over here so now every time I refresh the screen we're going to see we get this kind of quick transition uh where it just spins in a circle now that is a little bit fast we can play around with the timing and like the easing function similar to how you would with a normal CSS transition like a key frames transition by just adding the transition prop so this is kind of probably the the third most important uh prop that motion or frame motion is going to give you out of the box and this will take a whole bunch of different things you can get into like stag in and all kinds of other cool stuff but the main one that we care about to start or the main two I guess are duration so that is exactly what it sounds I could say one second and maybe we'll go over and refresh and we'll see that this goes much slower now um as well as easing and there's a couple different types of easing so you'll see actually if I remove this really quick and refresh see how it kind of looks like it has like a little physics effect like that how it kind of goes past uh and like kind of Jiggles a little bit like has a spring animation built in by default you'll see whenever I add a transition just with a duration that's going to go away like it's just going to kind of give you a a linear animation if you wanted to add that back in you would come down here and you would say type of spring and there's some other things that you can add in to kind of Define how springy it is these are things like damping um and I'm not going to go over all the specifics of spring easing and this but you could feel free to uh look into the documentation again for that and now we'll see we have a little bit of our our springiness back but we haven't gotten all of the specifics down just yet I actually don't want to use spring easing for this I want to play with ease because that's probably a little closer to what most people are used to so if you ever have used key frames animations you've probably done something like ease in out and you'll see once you type in ease you get everything that you're you're probably used to you can go ahead and play with all of these um they're all just going to be kind of different curves that your animation is going to follow the one that I like there's a couple of them I like like back in out is kind of nice you see how that gives you kind of like a little bit more structured version of that springiness effect but it's not going to wobble all over the place that one looks kind of cool we can just stick with that one for now now there's actually one other state besides initial animate and exit and that is or initial and animate sorry and that is exit so I'm going to go ahead and say exit and what exit's going to do is whenever this component unmounts from the screen it's going to then animate to that spot before actually unmounting so I don't actually have a good way of showing this right now so what I'm going to go ahead and do is I'm going to add a button just a button up here and this is why I made that class name earlier so go back and grab that if you haven't already it's just example button I just am too LCD to like leave a button not looking okay those class names again are these so one more chance to pause and just copy them if you want them do them in line doesn't really matter and I'm just going to make this say we'll say show/hide because that's what we're going to be doing cool we have a button and all that I want this to do is I want it to whenever uh some Boolean is true I want it to show that box and whenever it's false I want it to hide so we'll just say is visible something like that set is visible having a really tough time right now for some reason and I'm just going to set that to a piece of State using use State set that to uh well we'll say true to start now I'm going to go ahead and wrap our motion. div down here with some brackets and I'm just going to say if this is visible then we want to show it else we don't want to show anything and we actually have to toggle that using this button so I will add an on click click to our button sorry this is all just kind of set up this isn't the fun stuff yet I promise we're getting there uh but then whenever we set is visible whenever you click this button I just want to change it from whatever the current state is to the opposite so if it's visible I want to make it not visible if it's not visible I want to make it visible and now we should have what we're looking for so if I go ahead and click this you'll see that it actually is not animating out once I add it back in it's going to animate out again so that's cool uh whenever it leaves it is not going to and that is because we actually actually have to use one other component that we get from frame or motion to make this work that component back up here at the top is called animate presence so anytime that you want to use oops I just almost broke everything any time that you want to use the exit prop to uh add unmount animations all that you have to do is you have to wrap that uh component or you have to wrap not just that component but wherever you're actually doing the toggling with this animate presence prop so I'm going to go and do that look like this and now we should see that that works right so like as I as it goes away all that we're defining right now is that we want this to then rotate back out back to 0° and that is cool I think this will be a little bit more obvious if we also add maybe like scale so let's say we start the scale at zero and then whenever we animate in we put the scale oops we put the scale back up to one and then maybe on exit again we go back out to zero refresh now we see that it kind of pops in and as it goes out it kind of goes down like that and that looks pretty cool now one other small thing that I just wanted to show actually didn't have this on my list but I think this is a a good time to show this is well notice like whenever this animation stops our button is just going to kind of fly back into that space uh without animating wherever our box was here and the first thing that I want to show you guys for how we can fix that is the different modes for how animate presents work so if you type in mode and go like this you should see that there's a couple of different versions here and if you go to pop layout that is going to actually remove this from the flow so you see how my button kind of like flies down it doesn't wait for for this to go away that's because it's actually removing this black box from the Dom before it actually does the animation which gives the space back to this button so it can go there first and if the button is just kind of sliding in that might look a little bit stupid but what we can do again is uh go over to our button here and remember we can prepend literally anything with motion Dot and there's this really cool extra prop uh I wasn't again planning on going into this but I think this is a cool opportunity to show this and if you just add layout like this to any component it's going to automatically move it from wherever it is at one point to whenever it repaints to another location that may or may not make sense but you'll see what it looks like here in a second so whenever this unmounts now see how the button kind of like slides down all that I had to do for that was add one extra little prop so that's that's super super super handy one thing that you will notice uh you're not seeing it here is that you will get a little bit of distortion sometimes depending on uh where and how big the uh component is that you're adding layout to uh another thing that I'm not going to dig into right now um but if you do run into an issue with that let me know maybe I can do a uh deeper dive on layout animations now one other thing that you may be used to with something like key frames animations that we're not really doing here is actually adding key frames so really right now all that we have is like one stop right like if I open this back up it's just saying Hey I want to go from one value to another value to another value but what if you wanted to go between a handful of values so like what if you wanted this to rotate a 180° and then rotate back 360° and then rotate a little bit up or something like that right um and there actually is a way to do that and we're I'm going to use I'm going to leave all of these as they are so we'll go ahead and just add a new uh value we'll make that y so Y is going to be the same as like Translate Y or transform uh in the Y AIS they just give you this kind of uh shorthand for it where you can just type in y and let's just start by saying we'll start this at zero and then maybe whenever we won't add key frames yet we'll just say We'll animate this to 5050 or something and then it'll go back to zero so see that kind of goes down cool and then when it comes in yeah whatever anyways what we can do if for this animation let's say that I want this to kind of dip down so I go down on the y- axis and then go away up and then go you know maybe hold up there for a second and then go back down is instead of just using one value I can pass in and this is in my animate prop by the way I can pass in an array with as many values as I want so I'm I'm referencing over uh to my my old example here and you can do something like say we'll start at a uh translative zero and then we'll say that I want to go to maybe 150 pixels down and then maybe 150 pixels back up and then maybe we want to stay there for a second so I'll say 1 - 150 - 150 and then back down to zero something like that if I refresh now we should see that this does a whole bunch of stuff so that looks pretty cool right so as it comes back in flies up flies back down that is pretty dope one other thing you might want to do with this though is actually Define the uh percentages of all of these different stops so again if you use something like key frames animations before you'll normally say it like 0% I want it to be this value and then 50% I want it to be this value and then 55 this value something like that you can do that as well and that is just one extra value we're going to add down to our transition prop which is called times so the duration is always going to be whatever the duration is right here but you can break down the times this should be the same width as however long your key frames are so we have 1 2 3 four five so we need five times here uh and those times are just going to be values between 0 and 1 with 0 being 0 seconds and one being however long your duration is so if I had a duration of 5 Seconds uh a value of one in here would mean all the way at 5 seconds if hopefully that makes sense for something like this uh the the value that I used last time we could say like okay at 0% we want to be at a value of zero on the y- AIS and at say 25% you want to be at our first value of 150 then at halfway through I want want to be at minus 150 then I want to hold there maybe for a while so we could say like 0 say 95 something like that uh I'll say like 85 and then finally we'll come back down to uh our last zero again so this is just going to let us kind of hold on to that top like that stall at the top between minus 150 for a little bit longer if I refresh now cool you see how it kind of looks like it like holds up there at the top a little bit longer now that we've defined those times you can play these make them do whatever you want uh but that's basically all all you need to know for the absolute basics of frame or motion now that we have disc covered we can go ahead and move over to gestures so I'm going to cut really quick I'm going to make sure I Sav this piece of video and uh remember that all of this code again will be on GitHub so go ahead and grab that there if any of this did not work for you all right so we're going to switch over to gestures if you're following along with my uh repo like just go into your index file and you can switch over components uh let me see I have to make sure I have everything open I did not rename that did I okay sweet oops actually going to rename this file I won't make you watch all of this I want to call this gestures sweet I guess motion config was actually an acceptable name for this as well um and also I guess I should also remove all of this because you guys don't need to see all of this yet and Bam Okay cool so our starting point here is essentially exactly the same as our starting point for our other one so just a wrapping div with some styles on it to put stuff on the center nothing else now the idea behind what I want to show you guys in this part is just that you know it in our last little section there all that we were doing was doing kind of like animations on Mount and on exit which is cool but I think more often than not you're wanting to do animations when some action happens right and the most common of those are probably whenever you hover over something or when you click like something like a button um so I just want to cover really quick how you would go about doing like something like that super super simple um and we can go and get started I'm going to stop blabbering on so the first thing I'm going to do is I'm just going to make a button and I'm going to use that same class that I had from the last one so say class name and it was example button like that and we'll just do something like click me is what I did last time sweet dope okay we have a button here now what if we wanted to make something happen whenever we click this button well the first thing that we know from the last example is we're going to prend our button with motion dot oops motion Dot and I haven't imported that yet so import motion oops motion from frame R motion and now nothing has changed but we do have our superpowered component here and we've learned about variants well there's a couple of other variants for gestures and you can see what all of those are by typing in wow so you should get some kind of auto complete here uh while tap is kind of like while click they just call it tap which I guess makes sense um and we're going to go over that as well as while hover those are probably the two main ones uh we'll go over well in view in a minute and for well drag and while Focus you can check those out on your own time those are probably a little less commonly used uh but we'll say to start whatever we hover something how do we want this to work so I'm going to say while hover and it's is going to work exactly like any of our other variants so we can just type in our normal CSS classes in here I'm going to say wellever I however this I want this to go to a scale of say 1.05 1.05 there we go see if that worked beautiful now we have our little button scaling up and now whenever I click this maybe I want to scale this back into the page I'm just going to copy all of this I'm going to be using scale for that as well and we'll change this to while tap while tap and then maybe whatever we tap we want to go to what did I do last time 0.95 something like that and let's just add a little bit something else to kind of spruce it up we'll maybe also rotate it and we'll say rotate say 2 and a half degrees so now whenever I hover over this and I click on it it's going to go back into the page and kind of rotate super super cool and it's just that easy you can just drop in your little props like this add whatever variants you want and it's going to work um I want to talk about one other thing kind of while I'm in here and that is how you define transitions for multiple components so pretend like you had this same kind of effect let's start by just defining a transition here so we'll say transition is equal to um let's say duration we want this to be pretty quick probably so say 0.125 and then maybe for the easing we'll do just pick one uh easy and out cool works with me so now it should look a little bit different from last time I mean it's pretty quick so you're not going to see a big difference but pretend for whatever reason this is exactly the duration that you wanted um and then you had a second button here drop one down here maybe this button's a little different different maybe this has like a style of a we'll say background color of red something like that what did I just do oh I see there we go background color red cool so the exact same button maybe this is slightly different whatever pretend this is a different component uh for whatever reason just change a couple of values here sweet awesome but we have two different buttons and we want both of these to have the same transitions right uh maybe this is actually easier if I just bump it up Pretend This is 0.5 or something for this one so way slower but just for for purpose of showing kind of what we're doing here pretend you wanted this same kind of slow transition on all of your different interactions right well one way that you could do that actually that's going to make me angry I'm going back to 1.25 uh but pretend you wanted the same values and the same easing and everything on multiple components what is kind of annoying to have to copy and paste that all over the place um so what you can actually do is use a motion config so this is something it's kind like a context provider um in fact I think it just is a context provider but if you pull in motion config from frame or motion you can just wrap this around specific pieces of your app and then Define the transition in one spot and it will apply it everywhere so if we do motion config up here I can just wrap this around both of my buttons like this cool and then I can just take my transition and instead of putting it on my buttons I can just put it on my motion config so come up here here like this drop it up here and let's make this you know a different value so we can really see the difference uh whatever we'll go back to 0.5 so now both of these should be kind of slow so I go over that one kind of slow kind of slow if I speed it up in this one spot back to 1.25 it should speed it up in both ways this way we don't have to worry about defining our transitions everywhere over and over again and making sure that they all match um so yeah just a quick little thing that I wanted to call out while while we were going over these gestures I think now we can move on to uh a couple of other things so for this example we're kind of talking about how we trigger animations with these specific uh controls like this but there might be some other cases where you click on a button and then you want something to happen somewhere else on the page and we're going to switch over gears and see how we would do that I back over in my index.js file and I'm going to remove my gestures and I'm going to switch over to this animation controls uh let me go ahead and go into this so if you're following along again let me copy this one sec put this on the side so I can still see it and just like last time get back to a clean slate where we have nothing but our little wrapping div putting everything in the middle there we go sweet um yeah so as was I was saying again if you want to grab this from GitHub go ahead and jump in there and you can follow along else just type along with me so the problem that we're actually trying to solve here you would have seen this a second ago I don't know why that didn't refresh there we go that was odd um okay so the problem that we're trying to solve here if let me actually open back up our gestures components um like I kind of mentioned a second ago is these gestures are going to run whenever you do something on this component right so it's like while hover or while tapping on this specific component I want to do something but what if you want an action on one part of the page so say clicking on this button from our last example to do something on some other part of the page so for whatever reason maybe you want clicking on this button to make this button blue that would be kind of silly but you get the idea um the way that we can do that is using animation controls that's the name of this component so I'm going to start by coming on in here here and I'm just going to add a div inside of this uh this is going to be kind of a contrived example but you can see how you could use this to make something a little bit more complicated um I'm going to go ah and add a div and we're again just going to kind of make a square in here so we'll say style hope they give this a width of 150 again height of 150 and then give this a background color of black let's see should have my box there now perfect um and then above that I'm going to add a button so we'll say button again this will have our class names for our buttons so example button beautiful and we can just make this say flip it that's what I did last time cool so essentially what I want to have happen here uh for this example is whenever I click on this button I want to do something to this div uh in this case I just want to make this div kind of rotate 360 Degrees uh but you could think of an example where it's like maybe this button is submitting a form and that causes like some confetti to fly all over the screen or you click on this button and it causes maybe like a slide out model to come out from the right side or something along those lines this is generally how I would go about doing something like that and the way that you do that uh first we're going actually before we get to how we're going to do that I want to Define our variance so I'm going to start by importing motion from framer motion again and I'm just going to add I'm not going to worry about doing this anything to the button I'm just going to add this to the div here so I'm going to say motion dot per usual and I'm I'm going to Define our variant a little bit differently this way this time um so the last kind of couple of examples if I go in here we've defined our variance directly in line with whatever our props are but you can actually Define as many sets of variants as you want um and then just refer to them by string so that may or may not make sense uh but the idea is this so I can go ahead and add a prop called variance and then I can just give a key of whatever I want so say initial generally would make sense and maybe that's a rotate of 0° and then I could add another one where it doesn't need to be animated could be whatever you want so in this case I'm going to say flip and I'm going to give that a rotate of let me scroll this back in view sorry a rotate of 360 degrees and what did I do wrong oh no comma nice I'm not g to have as many of these as I wanted so I could have like flip I could have like you know banana and banana could you know rotate it way way more for whatever reason that would be cool and then you can just refer to these at any point by string so using our normal example I could say like while hover or something something like that and then just refer to the string as opposed to passing in you know the whole object I just say well hover I want this to flip and there we go sweet so I don't know why I keep having to like refresh there that's odd uh but now whenever I hover over this we're going to see that we actually get our variant and we didn't Define it in line with just the classes we just defined it with the variance here which is nice because then you can pull all of this out you can put it in a separate variable and then you can refer to those same things uh just by string in multiple different locations which is really really nice but this is not what we want to do we do not want to do this while hover what we want to do is whenever we click on this button we want to go from our initial state to our flip state so I am going to actually I'll say initial down here I just want to set that to initial meaning that this kind of string of initial is referring to this set of classes again and then whenever I click on this I'm just going to fire some function which we'll see how that works right now so I come up here we'll say on click I want something to happen I'll Define it outside of his here so we'll say handle click and then we actually have to Define our function up here at the top say const handle click equal to some function that is going to do man I'm having issues is going to do do something sweet and what is the thing that we want to do well the thing that we want to do is we want to Target our div here and we want to switch it from our initial variance to our flip variance and the way that we do that is using a hook that we get from frame motion called use animation controls so I'm going to come up here I'm going to import use anim controls we'll see it right there and this is going to return us back just in object like this so we're going to say const controls you can call this whatever you want it's equal to use animation controls I could call this uh flip controls if that makes more sense whatever kind of makes sense to you and some cases you might have you know five different instances of this so you'll want to name it something different uh but by default I normally just name it controls and then what you do with this is you come down to whichever item that you're actually targeting and you switch or you pass this into to the animate prop so instead of how we normally would pass in you know our Styles in here we're just going to pass in our controls like this and on our controls we have as you would suspect some controls so if I come in here and say controls dot we'll see what those are we have Mount start stop and set the one that we care about right now is start and that's all that we're actually going to cover for right this second so start is just going to take in I mean if we read this we can actually add the specific uh similar to any other variant you can just pass in these Styles directly but because we've already defined ours as a variant down here we can just pass in a string that says flip so following through one more time we're going to click on this button this button is going to fire this function which does not need this comment anymore and this is going to hit our controls start this variant and then this variant is defined down here which is going to say rotate 360° which should now work sweet we're going to see it doesn't work over and over again because now we're actually at 360° uh but every time I refresh this now I should be able to click that and get our animation um and that's pretty much it so anytime that you want one action to fire some other action I generally would do that using these animation controls so now that we've learned how to fire animations based on normal gestures as well as separately from some other function let's learn how we can do it uh based on the viewport position so like when something comes into view so hopefully you're starting to see a pattern here I'm back over in my index JS file and I'm just switching from that animation controls component component to a new one that I'm calling view based animations uh again I'm going to grab all this one sec drop it in my screen on the side and then we'll go again back to a pretty empty State this is going to be a little bit different this time though so let's all this all this and for the time being we can remove this and remove all of this sweet Blank Slate okay so what I have right now is just a fragment component up here and then I have a div with a little bit different styling I'm just giving this a height of a little bit higher than the size of the screen um and that's because I want to be able to scroll here so I don't know if you guys can see my scroll bar over on the right but I want to make sure that I have some distance to scroll up and down so that we can scroll things into the viewport and Trigger animations based on that um there's actually two different ways that we can do this that I'm going to show you the first one is going to look very similar to what we've already looked at uh and to do that uh let's go ahead and reimport motion actually so import motion from frame motion we're just going to do a really simple example I just want to take a a box and turn it from one color to another color uh actually we'll start with opacity so let's just do a motion. div right here I'm just going to close that off on itself and then we'll give this some style to start we'll say this is say the height of the screen so 100 vboard height and then give this some background we'll just say background of black doesn't really matter uh you could also imagine that this is just you know a single component like a button or some animation that you want to Fire Within you know some larger part of the page I just don't want to have to spend a bunch of time walking through making something super super fancy just to get this point across um but point being so what I want to do here is I want to say my initial state for initial we'll just go with a um we'll just say like an opacity of zero we'll just go from one opacity to another opacity here so opacity you have zero and then remember how we had like uh while hover and while tap and stuff we'll see we also have while in view which is right here and that's going to work the exact same way so what I want to say here is I want whenever this element is in view to switch the opacity from zero to one so our initial opacity is zero and when we're in view the opacity is going to switch over to one I'm also going to give this some transition because it's going to be really fast if uh we don't do this otherwise we'll say transition equal to a duration of we'll say 1 second something like that and now as I scroll down we haven't actually run into the box yet once that box starts to come into view see how it kind of Fades in instead of uh just popping in automatically as I scroll back up and down you should keep seeing this happen happening over and over again this is essentially all that you have to do so obviously I'm doing a super super simple example here but if you do have something where you can just Define it in one spot like this the easiest way is just using the wow in view uh variant over here directly on your motion components now like I said there's there's more than one way to actually do this um and the other way is for probably a little bit more complicated examples I'm going to show a pretty simple example but I think you can you'll run into examples where you might want to reach out to this instead of uh using this while and view specifically if you want to trigger a whole bunch of different animations at once and that is using the use in view hook um which also comes from frame or motion we'll also need a use ref Hook from react and we'll start with that I'll show you why in a second so I'm going to start by defining a ref so ref is equal to use ref and use ref is going to be imported from react up here at the top we can just start this off as null and I want uh actually to add a new div down here so let's see actually I'm just going to copy it in um well no I won't I lied I will write it in so we'll just start a new div down here our ref so that what we just defined above we're just going to assign to this div so we're just saying hey this reference this uh constant L we're adding up here is a reference to this element down here that's pretty much all that we're saying right there and then again I'm just going to give this some Styles so we'll say another height of 100 vport height we'll give this some color to start we'll say background of red is fine and then I also want to add a transition to this so we can transition between the two colors and I'll say 1 second background something like that cool all right so if I scroll down now I should have a red box down here cool that is a perfectly good start um and now to actually use this like to to do something with this uh with this ref specifically we want to use the use and view hook so I'll come in here and Define that say const is in view just going to return a Boolean that's either true or false and that is equal to use in view which comes from frame motion right here this is going to take in two values we'll uh start with just one and then we'll come back to the other one so the first one is this ref which we defined and then the second one is going to be some options it's going to look like this we'll come back to that in just a second just start with just your ref in here um before we actually apply this to anything I just want to show you that this is firing so you don't have to follow this if you don't want I just want to kind of show this as an example and I'm going to do that using a use effect and in that use effect in the dependency array I'll pass in our is in view and I just want to console log this out so we say console.log say is in view something like that and then print out what the value is open up my console here bump up the size a little bit now as I scroll down we should see that yes our red box is in view as soon as it leaves goes back to false back to True back to false and you could use this Boolean to do whatever you wanted if you wanted for some reason to fire off an API request or something you could do that it does not need to be tied to a animation per se like you'll see essentially what I'm going to do down here I'm not going to turn this into a motion. div I'm just going to keep a normal transition here um but this is really just a helper function like this is or just a helper hook that you can use for whatever you want you know generally you're probably going to use this for animations but there are other cases where you might reach out to this and just be like okay I want to you know whenever something comes into view I want to whatever you know pick up pick your thing that you may want to do in that case uh you know it's kind of up to your imagination um but for our case we do want to actually change something so all that I'm going to do is I'm going to take my is in view hook here and on our background color directly in our style I'll say if it is in view we'll make it some other color we'll say blue that's fine and now as I scroll down we'll see that we get kind of a similar thing like we're going from from red to blue as soon as this gets back in view right this is pretty cool as it is one other thing that might be annoying though to your users depending on the use case is if this fires every single time right right uh like you'll see it just keeps going over and over and over again and that is where our options come in in our use and view hook right here so I mentioned there was a second option you can pass in here and the kind of important thing that you're going to want to pass in here you'll see there's a couple of other options which I'll let you read into if you want to in your own time but what I care about is once which is just a Boolean and if you set once to true then this is only going to fire one time so now we'll see as I go back in and out it's not going to keep switching back and forth let me actually refresh so we can see that again so now as I scroll down animation fires one time but as it leaves the screen again now if I go back in it's not going to do it again so if you have like some kind of cool entrance animation or something that you're firing and you don't want it to go every time this is probably how you would want to go about doing it and that is it for view based animations let's go on to our last main topic which is scroll based animations all right our last time doing this so I'm back over in my index.js and I'm going to switch one more time so I want to oops I want to go from my view based animations to my scroll animations right here and I just realized I did not add padding so that's going to look stupid I'll have to remember to fix that in a second um but for now I'm going to go ahead and remove a decent chunk of what we have in here this is my file I can close this one can delete all of this stuff and I can delete this stuff right here cool uh I'm going to actually add one more thing before I walk through this because this does look a little silly we'll say style equals a padding say like 1.2 Ram something like that cool sweet looks good to me so all that we're doing here um all that I have in here to start uh actually I'm also going to add this down here because I already have a style tag and I don't want to do more than I need to do so we go like this perfect um so I've just added a bunch of fake lauram ipsum text in here again just so I have some room to scroll you can pretend like this is a blog post for this example um but you know just copy just add a bunch of random text it could just be random blocks of you know divs with different heights too if you just want to follow along it doesn't need to text uh this just felt a little bit more realistic so I decided to go ahead and go with divs with like a a fake blog post type format um but but what I want to do for this example I don't know if you saw it a second ago is up here at the top hopefully you can see my cursor here I want to have some kind of progress bar like you've probably seen this before on different um blogs like as you scroll down you'll have a little progress indicator showing how far down the page you've actually scrolled so you know how much more you have to read that's exactly what we're going to add for this um and the main thing that we need for this is a hook called the use in scroll hook or use in scroll the use scroll Hook from frame motion uh which I'm just going to import and I'll kind of show you what the different values are before I go ahead and add the div and everything like that um so let's just Define that we'll say use scroll that imports from framer motion and this does not take any parameters and this is going to return a couple of different things for us so if you just type in the word scroll you'll see our different options here the scroll the scroll progress like scroll X and scroll y progress are going to be a value between 0 and one and then X and Y if I remember correctly are just like the absolute values so like scroll y would just be you know 1,500 pixels or something like that whereas scroll y progress will be a value between 021 which is like 0% to 100% right something like that and uh okay we actually want to be able to use this right so let that would be cool to show so I'm going to import motion again and to make our little top div thing all that I'm going to do is I'm going to come up here and I'll say motion. div again we should be used to this by now I did this the wrong way better and we have to add some styling for this let me look over to make sure I'm using the same colors and everything as last time I'm actually just going to drop a bunch of this in here let's see so we'll say style like that I'm going to drop these in I also need a background color which I did not copy from there background color blue oops oops really oh oops that would be why can delete that there we go nice Okay cool so now we just have a box up on the top of the screen see we have like this blue thing right and what we're doing right now is it's just staying up there sticky to the top of the screen so I have position sticky top of zero width of 100% a height I'm just setting 20 pixels and then a transform origin of left uh or background color blue too so these down here are kind of like our actual Styles and then uh I'm is setting a transform origin of left because I want to scale this uh from the left side of the page so if I didn't do that I mean I can remove it in a second and actually show you we'll be scaling from the middle of this bar out as opposed to left to right which might look a little ridiculous um and we can actually just show that really quick so I don't even need to do anything extra here to get a basic effect here inside of my motion div just directly inside of the Styles not inside of animate or anything like that I want to pass in a scale of X and because this value is already a motion value and it's a value of 0 to one then we can just pass it directly like this to our scale value so we go like that what am I doing wrong oh scale X progress I'm an idiot scale y progress I'm sitting here refreshing like what did I do wrong but there we go scale y progress man I just took you guys didn't see it but I just took like 20 seconds trying to figure out what I did wrong there scale y progress not scale X progress but we do want to do a scale of X nice all right so now we should see as I scroll down we get our Bor that we're looking for just just slowly until we get all the way down to the bottom it should fill all the way up to the right side what I was saying a second ago about transform origin so if I remove this the default is going to be Center and now as we scroll down we're going to see that it kind of comes from the middle so that's all that I was doing there by defining our transform origin to left instead of the default which is middle so I'm go and remove that um one thing you're going to see that we don't have with this uh is that kind of springy effect that we normally get by default which I guess makes sense because this is kind of like an absolute value but if you did want to add a kind of springiness back uh to this animation what you can do is use the use spring hook which is another hook that comes from frame or motion so we'll just pass that in uh and this Hook is just going to take any motion value so in in this case the scroll y progress uh and I'm just going to call it scale X because that's what it's going to be equal to I can just import use scroll which is also not use scroll jeez uh use spring is what I want use spring there we go nice so now we have use spring and this value will take in our scroll y progress it could take in any other Mo motion value all it's going to do is take in some static motion value and give it that kind of springy effect that you're you're used to seeing so we can pass this in here instead of our scroll y progress I'll actually leave that there and make a new version so we can see both uh or so that you have both when you go back to reference this and just replace that with our spring based value and we should now see that we get like this spring right like as I go up and down kind of like overshoots a little bit and unders shoots and we get like our cool springy value still which is really really nice for how easy they make that to do now one other thing that you might want to do like uh this is a little bit limited as is right because you just have scroll Y which just turns into a zero or one but what if you wanted this to say affect the color like maybe you wanted this to start at you know purple and then become yellow when you get all the way to the right or something like that or whatever you wanted to defect any thing else that isn't just a value between zero and one uh you wouldn't be able to do that by default by just like you know if you were to console log this out you're going to see this isn't actually a value of just zero to one so you can't just like multiply it or try and do that math yourself it's actually what they call a motion value which is another thing I'll let you kind of read more into if you like um but fortunately they do have a really simple to use hook out of the box called use transform which lets you transform any one value into any other value so how that's going to work uh in in more case I'm just going to go with background so our background right now is just this blue color I'm going to change that here in a second um I'm going to say const say background just so we can pass it right in and I'll set that equal to use transform which also comes out of frame or motion and this is going to take three arguments so the first one similar to this is just going to take in our scroll y progress it's just going to be an emotion value and then this is kind of where the fun part comes in it's a little bit confusing I'm going to try and do my best to explain this but it might be easiest to just play with this yourself to really get a deep understanding of this um but this second argument is going to be a map of values from or an array of values that you want to map from so in our case this value starts at zero and animates oop sorry zero and animates to one so I'm going to start my first value at zero and it's going to end at one if I wanted three values in here if I said I wanted to go from 0% to at 25% I want it to be some other color and then animate between those two colors I could do that as well but I'm just going to go between 0 and one for now and then the third argument is going to be what you want that those values to be transformed into um I have two values I have to copy them from over here so I don't have to try and rewrite these RGB values but what I'm saying is okay when this value is at zero so when scroll y progress is all the way up at the top and the value is zero I want that to equal this RGB value here when it's all the way at the bottom where the value is one I want it to be this value right here and I'll just say it one more time for example pretend I wanted at 25% to have some other color uh you know I'll just drop in the same ones oops and just go ahead and remove that and whatever like just make some random change to this say a 100 or something if for whatever reason I wanted that 25% to go from this color to this color and then from 25% to 100% to go from this color to this color I could do that I am not going to do that especially because I haven't already tested that I'm just going to go back to our basic example here like this now I need to actually use this I was just about to scroll and I was like oh wait that's not going to work so I'm going to take my background here and similar to I did with scale I'm going to comment out the original background just so we still have that and I'm going to drop my background color in like this and let's scroll see if I messed anything up nope see cool so as we start up at the top we have this kind of like bluish color and as we go down we get this smooth transition from that blue to a green color down at the bottom so super cool and again you could use this to transform between just about anything uh in their documentation they will talk about the acceptable values here uh like you map to different sets of numbers you can go between hex values you can go between RGB values there all all kinds of different stuff that you can kind of transform between um but there probably are some limitations um so go ahead and check that out just to make sure you know if you're trying to use two different values here and they're not working it's probably just because they're not actually supported values one example would just be like CSS shorthand colors I've seen that I don't believe that works I can try it right here real time see Maybe I'm Wrong do like blue red something like that uh yeah so like that does not work for whatever reason um so you might actually have to just use hex or RGB or something like that which I guess makes sense like I'm sure they're just doing some kind of math on the numbers um but anyways this is this is the the basis of it so that's pretty much everything you need to know to do basic scroll based animations uh or even Advanced scroll based animations I mean I've done some pretty cool stuff just with used transform um just taking one value and turning into multiple other values and that's a wrap so one last call out that all of this will be on GitHub if any of this was confusing to you I promise if you just go and spend a little bit of time digging through it I don't think it should be tooo hard if you do get really stuck on something feel free to leave a message message uh below or leave a comment below and I'll do my best to get back to anybody who has any questions as far as learning further stuff I'll just call this out one more time I know I said this at the beginning but their documentation is fantastic just about everything has like a code sandbox which actually has a version of how this works so if you want to dig into anything more specific uh inside or even anything that we've talked about in here more specifically I'm sure I didn't talk about everything please check out the documentation it is fantastic and that link again will be in the description I believe it's framer docomo one last call out for for my website uh for H.D that will also be down in the description if you want to play around with some examples of like pre-built components uh and even be able to use them in your own projects you can just drag and drop any of these with uh code just come in here all this is available in both JavaScript and typescript using Tailwind you can go and check that out as well beyond that if you learned anything from this a like and a subscribe would mean the world to me I'm really doing my best to uh start picking up the pace over here on YouTube I have done plenty of stuff on other platforms uh but I'm I'm a really you know a YouTube person first uh and I've kind of neglected the amount of video content that I put out here so being able to see that there's some love below just with likes and subscriptions would really give me a big motivation to keep making more tutorials like this one more longer formed stuff that's digging a little bit deeper than I think some of the stuff that I've done before um so yeah that would that would mean a lot if you guys could do that beyond that um let me know if there's anything else you want to learn Beyond just questions if there's any other specific frame or motion stuff or anything else having to do with front end Dev or literally anything just let me know and uh I'll put it on the list I have hundreds of videos that I want to make that I haven't gotten to yet but if there's something that is you know a really strong suggestion I generally prioritize that over other stuff and that's going to be it so I will see you guys next time peace

Channel: Tom Is Loading

Views: 26,715

Keywords:

Id: znbCa4Rr054

Length: 52min 35sec (3155 seconds)

Published: Sat Oct 07 2023