Framer Motion (React Animation Library) Crash Course

hey everybody welcome back to the channel in this crash course we are going to be covering framer motion which is a really cool motion library for react applications and essentially what framer motion does is it allows us to create these really cool smooth complex animations with a very simple and a small amount of code and you can just go to the framer motion website and you can see all of the cool animations that you can perform and this is really really easy so let's actually just scroll through let's see if you can have any other examples like we have this over here and you can see the block of code is very very small whereas usually animations like these would take a lot more code and a lot more complexity similarly over here we can have drag events and then there's other other kind of examples that we have over here and we're going to cover a lot of them now in this crash course what we're going to be doing is we're going to be working with a bunch of different boxes i'm going to be working on animating these boxes in different ways now at the end of the day you can use all these animation principles that we learned through these boxes to build applications exactly like this but just for simplicity sake we're just going to work on the animation principles but again you can use these principles to create real life applications like the ones that are featured over here in the examples so let's just quickly illustrate some of the different animations so the first box that we're going to animate is this one over here so you can see here that it's a little bit lighter than this box and when i click on it i want you to look you'll definitely see what happens so when i click on this box you get this really cool kind of rolling animation and it got darker so it rolled all the way over here and it got darker if i click on it again you can see it rolls back and i can click on it and you know this can be really really cool and fun now this is actually you can think of this as a relatively complex animation but with framer motion the code is very very simple and easy all right and now we have this animation so when we hover over it we have this really cool kind of animation you can also click on it and the cool thing is we can also drag it so we can drag it and it kind of goes back to the correct location now we can also look at this animation this animation i'm going to have to require a refresh you can see it pops in and then the other ones they pop in at a different time and this can be really really cool to create maybe something that looks a little like this let's go to the docs and let's go to some of the examples and maybe like something like this so this can animate and it can propagate all of these other ones this one is a little bit faster but the principle is is relatively the same so this one animates in and then the other ones kind of propagate in as well all right and then we can also create cool animations like this one over here this one is also this is a keyframe animation and this is really really simple to do with framer motion even though it looks relatively complex and then the last one and this one's my favorite is we have i have all these buttons that are basically going to trigger this this box to animate so if i want to move it to the right we can move it to the right if i want to move it to the left i can move it to the left if i want to turn it into a circle i can turn it into a circle turn it into a square you can turn it into a square and the cool thing about this is you can do more than one so move to the right answer to the square move to the left square then back to a circle square circle so i can do circle then square circle square and i can move to the right move to the left circle i can do all these things and i can even move it to the left turn it or move it to the right turn it into a square and then just stop it midway and then i can do okay now turn it to a full circle move it to the left stop it maybe turn it into a square stop it so connect to stop the animation when wherever i want which is really really cool and so once you learn all these principles you'll be able to really apply them into your own application and what's great about this is we're going to build everything from scratch and the reason for this is because this is really really simple even the css we're going to do from scratch so all you really need to know for this crash course is basic html and css as well as react of course because this is a library for animating react applications so you do need to know at least the basics of react know how react components work and to know how props work really that's that's pretty much all you have to know for react but if you don't know any react i don't suggest watching this crash course anyways if you guys are excited then we will be moving on to the next video we'll be working on our very first box okay in this section we are going to set up our framer motion react application now of course for this we're going to need to create a react app and again i do expect you to know how to do this but in case for some odd reason you don't all you have to do is just go to your terminal cd into whatever directory you want your react application to reside in and just do a simple npx create react app and then give your react app a name you can call it something like framer motion app or something like that whatever it is that you want to call it so that right there will create the react application it will take a little bit to run now one thing to note is that you absolutely need to have node js installed if you want to execute this command because it is using npx so if you don't have node.js installed very easy installation whatever operating system you're in just go to nodejs.com or whatever it is and then just do a quick installation it's not it's not a very complicated installation so once you have created this react app what i want you to do is to move into that directory inside of the terminal and then i want you to install framer motion because framer motion is an npm package for react applications so once you move into that directory by doing something like cd and then whatever you called it do npm install and then framer motion and this is the only package that we need to install to get set up with our project and to create all these powerful react animations so that is simply all you have to do once that is done what you can do is spin up your application by doing npm start and it should essentially go over here to localhost 3000 now i suggest opening up your application in visual studio code this is the text editor that we are going to be using and i i'm using the integrated terminal i basically did an npm start and it started it up at localhost 3000. now the first thing that we are going to do is go to the app.js file and just completely remove this header and then we're also going to go to the app.css file and just completely remove everything in here and then in the index.css we're just going to add some styles actually what we're going to do is we're going to add that in the app.css so we're going to do star and then these are just some simple styles that are going to apply to every single element inside of our application this really doesn't have to do with frame framer motion but it's just going to make styling our application a lot easier so we're going to say that any element is going to have zero margin as well as zero padding unless of course we specify it and then we want a box sizing of border box and this basically ensures that the size of our box will stay consistent regardless if we add padding or margin so that is pretty much all the setup that we have if you refresh you should be able to see this empty page and now let's actually go ahead and let's start working on our very first animation let's go ahead and let's start working on animating our very first box now a quick reminder our very first box will look a little something like this and once we click on it you can see how that animation moves now when we click on it again it moves back back to the right back to the left now let's just talk about the different animations that are going on here the first animation that is very very clear is well uh it is changing location so it used to be here and then it goes over here and that's just one quick animation another animation and this might be a little bit subtle is the basically the opacity of this box is changing you can see it's a little bit lighter when it's on the left but when we click on it it gets a little bit darker and if you kind of notice in in the meanwhile it's getting a little bit lighter as we go along so it's not something that happens right away and then another thing is of course we have this cool rolling effect and the last thing is we kind of have like this little knock back springy uh kind of real time animation which makes things really really cool so we're gonna talk about how we can do this animation and it's actually really really simple with framer motion so let's actually go ahead into our actual react application so i have this actually opened up in localhost 3001. our actual app is in localhost 3000. so the first thing that we have to do is we have to create that box what i suggest doing is just creating another component and we're going to be placing all of our boxes in the app.js file but what i'm going to do is i'm going to create a basically a folder a directory called components and in here we're going to place all of our boxes so let's create a box one component and then in here we're gonna have a box one dot jsx so let's go here and we have a box one dot jsx now inside of this component directory you can also put a box two because we're gonna use that a little bit later and a box three and a box four and a box five but for now let's just create our very first box now this is going to be a very simple react component i like to use this extension over here es6 react snippets which allows me to have these snippets over here just define rfc and this was going to go ahead and just give me a functional component all right cool so now what we can do is we can just go ahead in here and just import that box so we can say box one and you can see that that functional component basically used to find a file name to create the component itself we can say import box one from well dash components and then dash ball box one and then the jsx element right over here we can basically say hey please just place box one right in there now of course you're not going to see anything different because well there's no box in here at the moment so let's create a box so the first thing i want to do is just create a simple container that basically holds the box so let's just give it a class name of box container box container and then in here we're actually going to have the box itself so this is going to be a div and then we're gonna give this a class name of box so we're gonna give this a quick class name of box and now let's actually go ahead and let's just apply some very very simple styles so inside of the app.css what we are going to do is we are going to go to there and then we are going to say okay well the box container and i'm only going to give the box container a padding bottom of 20 ram so we can have basically that space in between each box so this space right over here and now what we're going to do is we are going to go and just style our very simple box so our box let's just give it a width of 20 rims we're going to give it a height of 20 rams and this will give it well of course a width and a height of 20 grams we're also going to give it a background color of aquarium let's also give it a display of flex we're going to need this a little bit later if you don't know this that's fine just really understand these styles width of a 25 height of 25 and a background color the other styles you don't really have to worry about if you don't understand them we'll just do it flex direction of column align item of center and adjustify content of center and that's it so justify content of center so that's those are the styles that we are going to be applying to this particular um to this particular element right over here so now if we go to our uh page you can see that we have our styles which is well great now one thing is i probably want to have that kind of padding throughout our little app over here so what i'm going to do is inside of the app.css i'm just going to do app and i'm going to say i'm just going to give it a little bit of padding pounding a fiber in something like that and now if i go over here you can see okay that is terrific that's exactly what we want all right so now what do we want to do well we want to animate this when we click on it we want to perform these animations so let's actually uh start off simple let's say i don't want to click on it let's just say i just wanted to animate right away and perform this animation okay so perform this animation so just like that so let's actually start off with something very simple let's actually just move this box from the left to the right that's all that we want to do we don't want to perform any of the other complex animations well how do we do that well doing that is very very simple with framer motion so the first thing what we have to do is we have to define which html element we ultimately want to animate and we do that with the motion keyword in frame or motion so we what we would do is we would import something from frame or motion so we can say frame or motion and then what we're going to say is we want to import motion and basically we can use this a variable right over here to define which element we ultimately want to animate so we want to animate this box over here now how do we use this to basically define that we want to eliminate this div element well we would just do something like this motion and then dot div now this works with anything we can do motion dot anchor tag motion dot image it doesn't matter what html element it is essentially what this motion is doing is defining that hey we want to uh we want to ultimately animate this html element or this jsx element so we also have to define it if we have a closing tag it has also to be motion.dev and right there that does nothing all this says is that hey we want to animate this but now we still have to define the actual animation so how do we define the animation now when we basically append this uh our pre-pen this motion variable right over here what we are basically doing is injecting it with a bunch of different props that we can define so now what we can do in here is define a few props and the most important prop that we are able to define is the animate prop so we can go over here and then we can say anime now the anime prop is going to take an object so let's actually define an object in here and then the object is going to take a bunch of key value pairs now the key is going to be whatever it is that we want to animate so whether it is the color the opacity the position whatever it is that we want to animate and the value is okay how we want to animate it for instance right over here we want to animate basically this element so that it moves to the right so essentially we do that with x and this basically means that hey we are going to move uh we're going to basically move in the x direction now how much do we want to move in the x direction well we define that as the value so i can say here uh 1 750 pixels now that i'm only using this big number because i have a really large 27 inch imac but maybe you want to do something else maybe this will actually move out of the viewport now over here you can just define a number but you can also define a string you can say something like 100 vw and then over here you can see if i refresh this you can see it actually moves all the way out of the page and it's really really really fast so this actual this actual animation happens right away right from the beginning and we actually have no absolute control of it at the moment so you can see here that uh you can define any way you want you can also make it rems if you want to so you can refresh that and you can see here you have this really quick animation you can also make this pixels you can make this whatever it is that you want to as well as you can just define a number i'm gonna define one thousand and seven hundred you can see here we get this really cool animation and we get this really cool like springy feature over here and i'll talk about that a little bit but this is a really really cool animation okay cool so we were able to do this now let's actually start talking about okay well we also want to animate the opacity the opacity it seems like it starts a little bit lighter and then it gets darker so we want to animate that so over here the opacity in the beginning let's actually talk about this the opacity in the beginning is actually 0.5 so it's 0.5 transparent and then over here it is ultimately um one so it's not transparent at all so how do we do this well you might say okay in this animate we also want to animate the opacity the opacity and we're going to say that we want it to be one and this actually works completely fine except initially and if you might not be able to know this because it's so fast initially the um the box is already has an opacity of one now we can fix that by basically i don't know giving it a style maybe giving a style an initial style or in our box class we can give it a style of opacity of zero point let's just make it 0.2 just so we can really see it so you can yeah you might be able to notice that right there you can see that it's lighter so that's one way we can basically fix this another way that we can fix this is by using another prop and the other prop is called the initial prop and this basically says the in the initial of the animation what are these styles so we can basically say that hey i want the opacity to be 0.5 initially so now what we can basically go over here and you can if you notice let's actually make this like really light let's make it 0.1 now if you be careful and we'll talk about how we can actually change the speed of an animation a little bit but you can see here that initially it's 0.1 and then it's getting uh more and more dark so that is the initial prop okay cool now let's actually talk about how we can uh slow down this animation this is a really slow a really fast and kind of animation i'm really not liking it to be quite honest so how do we slow this down well we can slow this down by another prop and this is going to be called the transition prop and again this is also going to take an object and there's a few values in here and now one value that is very important is the duration and now i'm gonna change this later on to something else called stiffness but for now i'm just gonna say that the duration let's make it two seconds so now what we can do is we can refresh this and you can see that we can actually control that duration now one thing that i'm noticing is that we don't get that really cool uh really cool kind of like uh physics effect over here and if you don't remember that springy effect so let's just get rid of that duration and you can see here that we get kind of this like knock back effect which is really cool and i really enjoy that and the reason for this is because when we define the duration we also automatically define the type of the animation to be called tween and the tween is basically an animation that is just kind of straight and there's no real like physics behind it so if i were to make this a little bit faster maybe one second you can see here that it's just it goes here and it stops personally i don't really like this animation i like the spring animation so this is called spring now the problem is is that you can't use the spring animation with the duration so how do we go ahead and make things a little bit faster and slower well to do this we use stiffness so this is stiffness is force uh the spring type whereas duration is for the tween type now the stiffness it basically defines how stiff that spring is going to be now by default i believe it is 100 but you can make it higher now if you make it higher if i were to refresh this you can see how it's not that stiff you can see here that it's it's uh you have a huge kind of knock back effect now let's make this even a thousand and you can see here it's just it's so fast and it's not stiff at all uh we have this huge knock back effect now if you want to make it more stiff well you would just decrease it and by making it more stiff you're actually decreasing the duration of this so this actually looks a little bit better to me um but if i want i can actually make it more stiff maybe i'll make it like 60 or something so over here you can see here that it's very stiff and therefore it's slower and there's a little bit less knock back so i like this and that's what i'm going to be using all right cool now there's so many different things inside of this transition that we can use you can use also damping which is something i would like you guys to kind of look into uh there's just there's many different things now let's actually explore damping a little bit let's let's do damping and let's do damping of of 100. let's refresh this and let's you can see here that it it really slows it down so if you really want it to kind of slow down you can really use damping if you want to so you can kind of explore with stiffness and a little bit of damping to really get the speed that you ultimately want so if you decrease the damping let's see how it looks like you can see it's uh you get this really kind of wanky animation so you can really kind of play around with uh whatever it is that you want let's see 75 yeah you can you can always play around with it i believe the default is 10 so maybe you can go with five if you want to and you can kind of play around with it however way you want to i'm gonna completely get rid of it uh another thing is well there's there's a bunch of other things and you can kind of always hover through them and read the documentation with the transition but i'm not gonna be able to cover them all in this crash course because i don't want to make it extremely long now one thing that i also want to quickly note is that these properties over here most of them are just simple css properties so we can have something like background color and we can basically say um the background color we want to ultimately change it to i don't know let's say blue now we can go ahead and we can say blue and if i were to refresh you can see we also get our blue animation on there so most of these key value pairs are uh just css properties that are camel cased however obviously x is a little bit different uh x is just a special case for framer motion and essentially what it does it just defines the x and of course as you can imagine we also have a y value and that's just in case we want to animate things uh in the y direction but most of the time they're just simple css values also we have something called scale which i'm sure is not a css value but you can probably imagine what this does it basically increases it this increases the the box by two times of what it already was so if i were to refresh this you can see that we get this kind of animation so again these are just css values so you can pretty much explore whatever it is that you want to use all right so the last thing is i want to have this really cool rolling effect because well remember we have this really cool rolling effect to do that very very easy we just define rotate and we say that hey we want you to rotate 360 degrees so now what we can do is we can say in here you can see we get that really cool rolling animation all right cool so that is pretty much that so now what we want to do is we want to ultimately be able to control the animation we don't want the animation to occur right away so what do we do for that well we can do a simple uh react to kind of control the animation that we ultimately want to perform so we can have a used state hook and we can basically use that hook to control these particular values now later in the section i'll show you a different way of doing it and controlling the animation through kind of a built-in frame or motion component but for now let's just use a simple use state hook so let's go ahead and let's say const and let's just say animate and then say set animate and we'll just make this a true or false value and maybe we'll actually call this is animate so or is animating and then set is animating and then initially we'll say use state this is just a way that we can store state in the component level and initially we'll just set this to uh false we'll set it to false okay cool so now basically what we can do is essentially what we can say is okay when we click on this we're going to basically toggle this from true to false so in here we can say on click and again this is just simple react we can just say hey set is animating to whatever set animating is not so to the opposite of is animating so that's over here we're saying that okay if if uh is animating is true we want to basically make the opposite of it so false now if is animating is false then we want to set the opposite of it is true so that's all that is doing and then in here basically what we can say is okay is it animating and then we can have just some simple ternary operator if it is animating i want you to go to 750 if it's not then stay at zero and then similarly over here what we can basically do is say okay if it is animating we want the opacity to be one and then if it's not then ultimately what we want is uh the opacity to be zero or sorry 0.5 0.5 and then similarly over here the very last thing if it's animating we want to rotate it 360 degrees if it's not we don't want to rotate it at all so now we can go ahead and save this now again this is a very react way of doing it um later on i'll show you a different way of doing it so don't worry all too much about it but now if you click on it you can see that we get that cool animation and again this is something that we could apply to any kind of application that we want to again you're not going to be creating a box for your application that animates like this but you can see how powerful this animation can be inside of a real react application so i hope that kind of clears everything up i hope that makes sense and i hope that kind of introduces the real main components of frame or motion so we have this over here which is motion and then essentially we just basically prepend this to whatever element that we want to animate so we do motion dot div and then we basically get access to a lot of different props and these are the main props that we're ultimately going to be using the animate prop the initial prop as well as the transition prop the animate prop just defines how we are going to be animating our element the initial prop is going to define the initial styles of our element before we animate it and then the transition is going to define the type as well as the duration or in this case the stiffness so that is pretty much it really really simple and we were able to create this really complex animation with what 30 lines of code and some of this code was just basically import statements so it's pretty surreal how powerful this can be now i hope you guys learned a lot in the next section we're going to be learning how we can create this one so this box when we hover over it we get this cool hover effect and we can also get this kind of cool tapping effect and we also have this dragging feature and drag and drop is usually really really infamously hard to do not with frame or motion though so we'll talk about that next in this section we are going to animate our second box and by doing so we're going to introduce two new concepts the concept of events as well as of course the concept of dragging elements now dragging elements i'm sure that is pretty clear it's just the ability to kind of move an element around and drag it around to a specified location that is very easy now events is basically an event that we perform and once we perform this event we want to animate our element for instance an event that i perform is hovering over this particular box so once i hover over it i perform this event and i want to basically animate it and you can see that it gets a little bit bigger another event is actually clicking on this so when i click on it you can see that it gets a little bit smaller and get this kind of cool click event so that is basically what we are going to be doing right over here with this box so let's go ahead and let's do that so let's go here and let's just create our second box so inside the box 2 directory let's create box.jsx and what i'm going to do is i'm going to just simply copy and paste everything in here into here and simply what i'm going to do is just remove all of these props except for the class name so that's the only thing that i'm going to keep i'm going to get rid of this use state hook so over here we should basically once we go to our app.js and we basically import box2 so let's import box 2 from box 2 and over here we can basically put in box 2 or box 2 or rather not box you can see here that we should have our second box so we have our second box which is awesome so now the first thing that i want to do is i want to basically create these animations over here so when i hover over i want to have this animation and then when i click on it i want to have this animation now you might be thinking okay we can really do this easily with css so we can basically add you know something like in inside of the css we can have i don't know maybe box dot hover something like this hover so once i hover over it i want to increase the size of our box and then you can perform of course some styles now there's actually a much easier way of doing that in frame or motion and of course that is going to be inside of the props so there's a bunch of props and you can actually see the props well right over here so when we do while you can see all of the different props that we have you can see here while hover i want to perform some sort of animation while i focus i want to perform an animation while drag while tap and there's a few more the problem is is uh i don't remember them but there's there's a few more animations and i believe if you actually just kind of hover over if you read the documentation you can see some of the other animation or events that you can use so i'm to do while hover so essentially what i'm going to do is while hover and then in here that's going to take in an object of all the different styles that i want to ultimately change when i perform the hover event in this case i just want to increase the size of the box so i can say scale it 1.1 so this basically says that hey we want it to be 1.1 times larger than it originally is so basically 10 larger about so now over here what we can do is when we hover over it you can see that we get that effect okay cool that's awesome and of course now what we can do is we can add another event we can say okay while tap so if we click on it what we can say is okay i want to decrease the size a little bit so i want to decrease the size to 0.9 so now it's basically 10 smaller than what it used to be so now you can see here and then when you click on it you get that cool effect so very very similar to what we have here so it's uh yeah that's pretty much it that's really really easy and you can again you can have different effects over here so now let's talk about how we can make this draggable so you can see this one's draggable but this one of course isn't you can't drag it now to make it draggable it's extremely easy all you have to do is add the drag prop and that's it that's all you have to do add the drag prop and now it's draggable you can see it's draggable and what's cool is you can actually just you can see it kind of has that really cool effect over here you can even push it out of the screen if you want to now obviously this is ultimately not something that you want to have inside of your application you don't want to kind of have this free range dragging so you might want to constrict it so you might want to say something like okay i want you to only be able to drag it in the x direction so you can see here now if i try to drag up you can see i can only drag to the the x direction so either left or right similarly we can say drag y and then now we can only drag y if we want to be able to drag uh both x and y then we will just say drag on its own so drag on its own and that's ultimately what i want to do i want to give them the flexibility to drag it however way they want but what i want to do is i want to basically restrict the kind of the how how much they can drag it so remember the initial location is over here i don't want them to be able to drag it all the way over here and basically just move the thing out of the the screen so basically what i can say is define some drag constraints and you can see that there's a bunch of drag props that we can say and i suggest if you are really looking into working with the drag and drop feature really start learning these but the main one i want to talk about is the drag constraint and this is going to take in an object and this object only has four values that can take left right top or bottom and essentially what this is going to do is ultimately constrain how much you can move that particular element to the left to the right to the top to the bottom for instance let's say right and let's just say 20 so 20 to the right so now what i can do if i decide of course i can still move it anywhere i want but if i move it to the right you can see that it's a little bit constricted and actually moves a little bit back to where it ultimately was so you can see here that there's a little bit of restriction i can't move it all the way to the right anymore and that's because we have some constraints now of course we can do this with the left as well now the left you can say negative 20. so you can see here you can see here that we i mean it's a little bit difficult because this is already at the left but you can see it's moving a little bit back now if we go to the top or the bottom you can see that it just goes completely away we can also add that to the top let's just say 10 to the top or even 5 to the top and the bottom let's say you want to restrict that access as much as possible from in the y direction so let's go here and you can see very restricted very restricted and it actually moves back to ultimately that particular location all right cool so that's pretty much it for the drag and drop feature and that's pretty much it for this box in the next box we are going to be using this this is a really cool box uh this is a really cool animation because you can basically see okay it moves in initially and then we have other elements that move in one at a time after this element was introduced so over here we have this parent element and in here we have a bunch of children elements and these children elements are sibling to one another and you can see here that we have that initial animation and then we have this animation so we're gonna do that uh in the next section we're gonna introduce other concepts of frame or motion okay so now let's move on to the third box and this box we're going to be introducing a new concept called variance and variance is a really important concept in framer motion so again just to quickly illustrate what's happening here inside of the third box what is happening is if we refresh we get this initial animation and then we have these children also propagating in and we can do this through variance so the first thing that i want to do is i want to create that box so let's go over here let's create a new box directory so inside of the component directory let's create box three and then in here let's create box three dot j s x and in here let's just do a quick simple copy and paste we're gonna copy and paste this we're gonna call this box three over here i believe i didn't change this to box two so let's change that to box two doesn't really matter it won't really affect it but now what we can do is we can let's just get rid of all these styles except for the box itself and let's get rid of this okay cool so the first thing that i want to do is of course import this in here and actually display it so box three and notice that it actually auto imported so now if we go over here we should see our box of course nothing is animating so now what we want to do is we want to basically animate this in initially so you might be thinking okay well that's pretty easy to do we can just have an animate prop and an initial prop maybe the initial prop is out of the screen and then we want to animate back into the screen just to show you how easy that is to do we can just go to box three we can just do something like animate and we can say that we want the x to be basically the position that it's in right now but initially we want it to be x maybe is negative 100. so if we go back to our application and hover you can see we get this effect you can maybe make this even like a thousand just to really get it out of the screen and you can see here that we get that effect this is really easy but you can see that it kind of gets a little bit messy every single time we have to put the animate and the initial and this gets really really messy uh and so a better way of doing it is actually using the variant so the variant prop and basically with the variant prop essentially what we can do is pre-define our styles and then we can say hey what variant we ultimately want to display so for example what we can do here is we can basically say const const list variant or let's just say box variant so box variant and this is just going to be a simple object and this object is going to contain a key value pair where the key is just any arbitrary name that we define and then the up the value is basically an object that contains the styles so we can say we can call this anything that we want we can call it lion if we want to and we can say okay well we want these styles now obviously this name doesn't really mean much and we should probably change it but we can say that okay well we want 100 we want the scale to be 1.5 and over here what we can do now is instead of having animate what we can basically say is uh animate and instead of having that object we can basically say hey we want to animate this right over here the lion variant so the first thing that we have to do is define the variant that we ultimately want to use so we can say we want to basically use the this variant which is again an object of objects and then inside of this variant we want to use the lion basically properties so over here we can say lion so if we go here you can see that we have that kind of initial animation now over here we can have another object if we want to and we can say elephant if we want to and these are really stupid names and i wouldn't really call them but just to illustrate that they can be really called whatever it is that we want maybe this one we move it 1 000 and we make it smaller so the scale is this so right now it's still going to be using the lion because the animate is the using this object right over here but we can also say elephant now so we can basically say elephant and you can see that we get this animation so now we're using elephant so that is basically variance in a nutshell and that's just a better way of doing things rather than um rather than uh basically you know just adding the styles in here now what's nice is you can actually basically use the same principle with the initial so instead of having the object you can basically say okay initially i want it to be lion and then i want to animate it to elephant so you can basically say that initially i want it to be this really large thing and i want to animate it to elephant and just to kind of illustrate this let's just make the background color background color yellow for instance just to really illustrate that this is how it works so you can see here it's yellow and i guess it stays yellow because we're not animating the end the elephant we're not animating that to be aqua green i think or what was it called again let's just say green for instance so you can see here starts off as yellow and it and it's kind of ugly but you can you get what i mean so that is basically variance in a nutshell now variants are very very powerful and they allow us to do multiple different things so let's actually go ahead and let's just completely get rid of this variant let's just get rid of it for now and let's just get rid of these two and let's just go ahead and let's just create um um it's a weird animation okay let's go ahead and let's create those boxes those little boxes over here and to do that what i'm going to do is i'm going to create a use state hook so i'm going to say boxes i'm going to say set boxes and then i'm just going to define the boxes in the use state hook wherever that is use state hook and this is just going to be an array of boxes so we're going to say that the id of the box is one we don't really need this and that's pretty much it that's actually really all that we need actually you know what let's actually not use a used state hook let's just make things a lot simpler and what i'm going to do is i'm just going to simply have a an array of uh three numbers so three numbers i'm going to iterate through each number so i'm going to map through each number and for each number i'm going to say that hey this is a box and basically ultimately what i want to do is i want to return a list element so i'm going to return a list element and that's pretty much it and let's just give this list element a class name of box item so we're going to call this box item so very very simple very simple animation let's actually take this class of box item let's go over here and let's just do some styling so the box item is going to have let's see we're going to make it a box of course we're going to need a width of let's make it a small box 0.5 rams as well as a height of 0.5 rims and then we're also going to give it a background color of white and then we're also going to give it a little bit of padding why not and then let's also give it list styles of none because it is a it's going to be a list and i don't want those list styles let's also give it some margin of 0.5 ram so now if we go back here we should see all of these boxes if i hover of course there is still no animation so now let's actually perform this animation but let's actually use the uh the variants that we talked about so let's actually talk about essentially what this animation is doing so initially basically what's happening is it's it's not present initially so first of all it's not present and then it well gets present so let's actually create a box variant let's go over here and let's create const box variant and this is going to be an object and initially the first state we're going to say hidden and basically in hidden we're going to say that hey the x value is let's let's actually use a string this time is negative 100 v w so that is the initial state and then the visible state the visible state let's say that this is going to be x of zero so this is just going back to our particular location so again now what we can say is we want to use this particular variant the box variant so we can say box variant and then what we can basically say is okay well we want you to animate it to visible we want you to animate it to visible but initially we want it to be hidden so initially we want it to be hidden so this is very very simple so now what we can basically do is you can see oh that's the wrong one you can basically see we have our element okay cool so that is working fine and dandy and now one thing that is really cool is inside of the variant we can also add the transition so we can also add the transition if we want to and over here we can say that hey maybe what i want is a delay this is something that we didn't talk about then but we can also say hey we want a delay of five um five uh or 500 milliseconds half a second just to kind of illustrate this to you let's just have three seconds and you can see if i hover over refresh this there's actually a delay a three second delay for when the animation is occurring so for now let's just do half a second and let's just refresh this and you can see that we get this really cool delay now let's start working on animating this over here so we want to animate this and then we want to animate these elements these child elements right now it's just animating together now to animate this of course now what we have to do is basically append that or prepend that motion right over here so motion dot the li element so now if we were to refresh this you can see here that it's working completely fine now one thing that is cool okay so this is this is really really cool to note is that the the parent so basically the parent if it contains the variant essentially what happens is the any child that has this motion dot within it is also going to have animate visible and then init initial of hidden so whatever the animate and the initial is of the parent that has a variant is also going to be inside of this child as well so to kind of illustrate this and this might be a little bit confusing so this this will be confusing believe me it's not uh it's not the most intuitive thing to understand but to kind of illustrate this what really happens behind the scenes is let's let's move this over here what happens behind the scenes is because this is a child and it has a motion dot of this parent what happens is the animate and the initial of this will also be will also be and initial however the variant is not going to be the exact same variant and actually what we can basically do at this point is define a new set of variants so we can say it's basically list variant list variant and over here we can basically have the same properties now we're going to have to have a key a value pair of hidden and visible so that it can ultimately be used by it but essentially we can have different styles let's actually copy this and now over here we can have different styles so for instance you can basically say that okay well we don't want it to be completely out of the page maybe we just want it to be negative 10. and then over here maybe we can say that we want the opacity to be initially when it's hidden zero okay and then over here invisible what we can basically do is say well what we want to do is we want the opacity opacity to be one when it's nice and visible and let's give it a delay of i don't know one second so over here we have delay half a second over here we have a delay of one second so over here what we can basically do is give it a variant define what variant this is using so we can do list uh list variant now over here we're basically again defining that this is visible and hidden but again we don't have to do this because over here in the parent what's happening is this is going to essentially add these props over here with the exact same value so we can actually get rid of this if we want to i hope that makes sense it's kind of a difficult idea to grasp but now what we can do is we can basically see that animation and then we see this come in and the reason why this is happening is because again behind the scenes it has the animated visible and initial of hidden except now it's using the variant list variant so it's a completely different variant and the delay is one second whereas this is delay of 0.5 seconds so you can see here that we get this really kind of cool animation now let's say that okay um this is cool but i don't want to basically provide a delay i just want to after this parent is done animating i want to just animate the list so i don't want to provide a delay so what we can do right now let me just show you what happens if you don't provide that delay they both basically animate at the same time and at the end of the day it kind of seems like it's coming together so essentially what we want to say is okay well after this animation is done then i want to animate the parent so what we can actually do is inside of this variant inside of this particular transition we can basically say the when keyword and over here we can basically say we want to animate we want to complete this animation before the children begin to animate so we can say before children so now what we can do is over here without defining any delay inside of the variant hover over it and you can see that we get that cool animation all right cool now the last thing that we can do is basically stagger the children so we can say that okay well we want to animate these in a staggered way so each child is going to have their own kind of unique animation that is very very simple we can basically use stagger children and then we can provide a time so we can say well we want to stagger them uh we want to basically have each child have a two point second animation and then the next child can go ahead and start animating so you can see here you can see that we get that cool effect all right so i hope that makes sense this is one of the more confusing ones the other ones are i think are going to be relatively easy but this is a really cool concept again this allows you to create really complex animations i like the one that we saw with the uh with the uh basically that nav bar so i hope that makes sense and that is pretty much it let's go ahead and move on to box number four okay so now let's move on to the fourth box and this box is going to introduce a new concept called keyframes now i'm sure you guys are already familiar with keyframes this is a very popular concept in css and we can actually use keyframes very easily in frame or motion to have animations really really cool animations that look something like this so this is really really cool animations you can see here that it moves to the right a little bit and it changes uh into a circle then it moves back to the left so this is some really really cool animations that we can do very easily with framer motions through keychains so let's actually go ahead and let's just build this out so to do this of course we need to create another box so let's create box 4 and then in here we're going to create a box for jsx and then let's go ahead and let's just copy our template from box one just copy that in there let's get rid of all of these uh props and events let's get rid of this use state and let's just go ahead and change this to box four not that it really matters let's go over here now and let's just say hey we want box 4 notice how it auto imports if you want you can go ahead and import it yourself all right this is a very simple box we have this box right over here but we want this really cool keyframe animation and we can actually do that with arrays and let me explain to you what i mean by that so in here what we can basically do is of course define the animate now we can put this in a variant if we want to but i'm just going to for simplicity sake just put it inside of a just the animate prop and basically what we can say here is we can say multiple different things so remember how this animation is doing this is getting bigger and then it's rotating and then you know changing the radius so over here remember we can define the scale to make things bigger so we can say that hey we want to increase the scale to um uh 1.4 and then we can say okay well we want to have more animations but this is a little bit more complicated this animation you can see here that we're changing the scale and then we're decreasing the scale and over here we're changing the radius and then we're re-changing the radius to something else we're rotating it one way and then we're rotating it another way to be able to do all this what we can basically do instead of defining a particular value we can actually define an array of values so we can say initially hey we want this to be 1 and then we want this to be 0.4 and then we want this to be 4 and then we want this to be 1 again and then we want this to be three and then we want it to go back to one and then over here we can also define inside of the transition or sorry outside of the animate we can also just define the transition and let's just define that hey we want this ultimate uh animation to have a duration of two seconds so over here you can see that it's going to basically animate uh to each particular scale and the final duration is going to be two seconds so over here you can see we get this really wonky animation and you can see very quickly that how we can basically get this very cool animation very easily so let's actually do that right now so let's actually go ahead and let's just quickly observe this so it seems like okay it's initially at one and then it gets a little bit bigger gets back to normal and that's pretty much it so it gets a little bit bigger then goes back to normal so let's say that um okay so initially we're going to say that it's 1 and then it's going to get bigger to 0.4 and then let's just say that it stays at 0.4 for a little bit longer because you can see here that so it's 0.4 and then you can see that it turns into a circle and still at 0.4 and then it goes back to 0.1 and then it goes let's say we'll keep it at 0.1 so here what we're saying is that in this basically the duration of two seconds we wanted to um so two divided by five what is that um uh i'm i'm really not sure i think it's point four yeah so so the first point four seconds we want it to be uh the scale of one and then the next point four seconds we want it to be uh basically one point four and then we also want the next point four seconds so this is going to be 0.8 seconds total we want it to stay at 1.4 and then we wanted to go back to one in for the next point eight seconds so let's go ahead and just save this just quickly illustrate this you can see it looks a little something like this so now what we can do is we can add other animations for instance what we probably want to do is we want to animate the uh the border radius you can see initially it's actually something like 20 but then you know it goes 20 50 and then it goes back to um to 20. and it seems as low that if it's 50 uh once they also get smaller so it seems like it's kind of the latter half that it's also 50. so what we can say here is we can say that we want the border border radius to be also an array and this array is going to have the same number of values in here so it's also going to have 2 5 values because over here we have five values so we're going to say here that we want initially the border radius to be 20 and then what we can also say is maybe the next one is 20 so the first point eight seconds is 20 and then once we uh maybe reach uh this part over here we're going to make it 50 so we're going to turn it into a circle so we're going to turn it into a circle and then as you can see it gets smaller but we're going to keep it at 50 once it gets smaller so we're going to keep it at 50 and then we're going to turn it to back to 20. so we can see here if i were to refresh this you can see that we get that animation alright cool awesome so now let's just go ahead and let's perform the rotation the rotation is going to be very very similar so let's go over here let's do the rotation you can always play around with this i kind of just i played around with this beforehand and these are kind of the values that i came up with that really worked so initially we're going to have no rotation for the first 0.8 seconds and then we're going to do a rotation of 270 so it's going to move it 270 in in one direction 270 in the next direction and then we're going to do zero rotation and ultimately we're going to save this and you can see that we get this really cool animation all right cool now these values again you can always play around with i just really play around with it and that's the one that we got all right so that's pretty much it that's a very simple uh powerful animation that we can do with framer motion and keyframes so these guys cannot they don't have to also be just straight up values it can also be an array of values and that basically means that hey this is going to be a keyframe all right so that is pretty much it and remember each value over here is basically uh dependent on this duration so if i were to change this to 10 seconds then each value here is going to be 2 seconds so it's initially gonna be one second one and then it's gonna animate to this and then that and you can see that it's actually kind of cool these these animations so i'm gonna move it back to two all right that is pretty much it the last one is the really cool one and probably the one that you guys want to see the most so this really cool animation we can stop it whenever and we can actually really do this very easily with actual uh a framer motion hook that is provided to us finally let's move on to the last box and this box is going to introduce a new concept through the use animation hook now remember what this box is ultimately going to do we're going to be able to click on buttons and it's going to animate this particular element the way that we want it to now we kind of did it with this initial box over here but the way we did it was through the use state hook which is a react hook and it was kind of a hacky way of doing it there's actually a better way to animate elements through events like you know click events on particular elements through the use animation hook and let's actually basically create this element over here and then let's start using the use animation hook so as usual we're gonna need to create a new box so it's gonna say box five in here we're going to create a new jsx element called box 5. we're going to go ahead and just as usual just copy the boilerplate in box 1 paste it in here change this to box five get rid of this hook and actually you know what let's actually just explore this this is pretty much what we're doing so over here on a click event what we're doing is we're basically changing the state and then we're changing the animate and this is pretty hacky i personally don't really like doing this way and mainly because there's a much better way of doing it and that's again using the use animate hook so let's actually go ahead and let's do that right now so let's go over here and let's go to the app.js and let's just import box five notice that it auto imports and let's go ahead and just create those buttons so we have a bunch of buttons that we can create so we're going to say button and we're going to say this first button is to move to the right so move to the right and then we're also going to have another button another button and another button this one moved to the left this one is to make things or to turn things into a circle and this one is to turn it into a square again and then also let's have our last button for just stopping the animation at hole and we can actually see how easy this ultimately is now before we do this let's just go to our box dot or our app.css and let's just style those buttons just so we can make them a little bit prettier um not really all that important but i like to do that so let's go here button and how are these styles over here let's just quickly look at these styles so it seems like the color is white it seems like there is no border which is cool and we have a background color all right so let's uh kind of think about these styles i think that's it there is no hover styles which is okay that's fine all right so let's move on and let's just say that we want the the color to be white so we want that color to be white and this is going to be the color of the the font of course and then we want the padding to be one ram we want let's have a margin right of 1.5 rim a margin bottom of three rims and then let's also give it a border of none let's give it a background color of uh let's say rgb 48 i'm just looking at my notes here one five five and then one nine seven that's the blue color let's also give it a font size of 1.25 rem and then let's give it a font weight of 700 so there's just some simple styles just to make our button look a little bit nicer uh let's also give it a width just a fixed width of 15 rams just so it can be kind of consistent now of course when we click on this nothing happens lastly let's just give it a cursor pointer so we can have that pointer cursor okay cool so now what we want to do is we want to animate this to the right when uh when well we click on this button so how do we go about doing that now again the way that we did it in the very first box doing these kind of animations will be difficult if you have to do it in a hacky manual way and we actually don't want to do it in a hacky manual way we actually want to basically be able to control the animation in some way and again what we can do is do that through the use animate hook so we can say use animation sorry not use animate use animation and essentially now what we can basically say is define a controller using the use animate hook so we can say control and then we can basically say use animate and basically this is ultimately what is going to be controlling the animation so in here what we can do is we can basically define animate is equal to the control now how do we define our animation well now what we can do is basically on a click so let's say we want to click on this button and this is going to obviously call a callback and basically on a click what we ultimately are going to want to do is use control and we want to start an animation and so over here we can say dot start and then over here as usual we can just define a simple animation so we can say we want to move x we want to move 150 x and over here we can also maybe define a transition so we could define whatever it is that we want this is going to be similar to what we already learned so over here we can say that the duration is going to be 20. so now what we can do is we can click on this and you can see that it moves to the right and of course now we can do the exact same thing with the other buttons so let's go ahead and let's just copy this animation or this uh callback let's go ahead over here and let's copy that i don't know where it starts and where it ends i believe it starts and ends here and let's go here and let's just paste that in there and now we want to move this back to zero so now what we can see is if i refresh this we can click and we can move this back to zero and what's cool is what's happening is okay it's starting this animation so it starts this animation but then when i click on this button it immediately ends this animation and starts this one and that's why basically uh um basically what what's happening is well doesn't really immediately end it but if it's basically contrasting what it does is it yes it stops this animation and then it moves on to the next one so you can see here that it's working fine and dandy and again we can now add other animations so we can add the circle we can have an on click this is not really that pretty might be better if we just do something like this but it's fine for now we can also say for the circle maybe ultimately what we want to do for the circle is change the border radius so we may be the border radius and we want to change that to 50 percent to make it a circle and then over here we can basically move this right back to where it was so the border radius maybe have the duration b1 for this and over here we can say the border radius is um zero so back to a square all right cool so we can actually move this to right left circle square all that cool stuff now how do we stop it well stopping it is even easier than animating it in the stop button we can have an on click and this can call a callback of course over here we can just simply say control dot stop the animation so stop now you can just go ahead and call that and that's pretty much it so now we can move it to the right stop it circle stop it square stop it left circle square square and then back to a circle i'm trying to like to change it back to the square move it to the left or move it to the right circle then stop it you can stop it midway and you can move it back to the left if you want and that's pretty much it and it's really really cool and really powerful so that's pretty much it for framer motion i hope uh all these illustrations you can use in your own application now and i'll see you guys in the next

Channel: Laith Harb

Views: 10,248

Rating: 4.9903383 out of 5

Keywords:

Id: 1vKiPwEYbyk

Length: 72min 31sec (4351 seconds)

Published: Sun Jun 13 2021