Animations In React - Framer-Motion Tutorial

hey guys how's it going i'm back here with another video and today i decided to bring this video where i'm going to be showing you guys how to build really cool animations in react using the framer motion library so if you don't know frame of motion is a really popular library in react which allows you to build animations with barely using any css actually i believe in this video i won't even need to use any css which means i will only be using pure javascript there's a lot of benefits to using firmer motion to animate your your your elements and i will go over all of them while at the same time building some really cool animations using the library if you want to check out the documentation i'll leave the link in the description i'm also going to leave the link to the sandbox that i used for this video so if you're interested in that just check in the description and yeah that's basically it let's get into the video [Music] [Applause] [Music] okay everyone so differently from a lot of my tutorials in this tutorial i'll actually be using the code sandbox.io website just because i thought it would be easier for me to show all the changes that i'm making whilst i'm writing code usually uh changes aren't really immediate so you don't really need to be seeing one thing next to each other and while recording the video usually um that's fine but for this specific tutorial i want you guys to have a clear view of what is happening on the screen of the website every time i make some sort of change to my code and i felt like this way would be better so um let's get started writing our code so basically you can see i have a an empty react application over here obviously it has some css it has like a gradient on the background but it doesn't really matter because the point of this video is just going over the framework motion library so in order to start out you need to install the firmware motion library to do that you'll have to go to your react application and either run yarn add framer motion like this or a run npm install framer motion so this is the name of the library um this will install the pad the only package that we actually need and after you do that it should be fine so like i mentioned frame emotion allows you to create animations in javascript without actually using css the reason why this is cool is because animations and css are really annoying i think everyone can agree with that um i i know that i've i've wanted to make animations um certain projects and i actually didn't because i honestly felt like css was annoying to to work with so having a library like this uh will facilitate it a lot not to mention it allows you to integrate all of the cool stuff from react such as like states and page renders with your animation which is something that is a bit harder to do with css including like using variables and stuff so um that's something that i honestly feel like it's a positive and one of the main reasons why you should use this library so to get started with the library i'm gonna import over here at the top from framer motion and i want to import something called motion now this motion variable over here will be really important because every time we have some sort of element in our screen which we want to animate we need to use this motion variable to tell frame of motion that this is an element that we want to animate so let's come over here and just add a div inside of our code now since i'm using this code back the code box like this code sandbox project it already has some css so the div automatically looks like this beautiful little square over here but uh if it is your case never don't forget to make your element look like uh whatever you want to animate right so it doesn't have to be a div it can be a button it can be whatever html element you want all of them will work the same but for this video we're just going to make animations with this little square over here and if you want to check the css basically this is all the css that i'm using in this video i didn't write it comes with this example project so how exactly are we going to animate this element well in order to animate it i'm going to actually just come over here and say that this div is actually a motion.diff so every element in html that you want to be able to animate you notify from a motion that the element is supposed to be animated by putting this motion dot before the name of the element if it was a button you would do motion dop button right and it will work normally it will this is a div however now it also takes in the props that motion uh that the motion variable over here provides us and what exactly are those props well the first one is really important and it's the main one it's called animate right and this animate prop over here um takes in an object which is the end state of any animation we want to create so for example if i want to say that our animation is basically just sending this square uh i don't know 100 pixels up then i would come over here say y uh because y is a is a property that we want to change right the y axis and send it 100 pixels up uh um i actually just realized that i forgot about this but uh in an actual html a 100 when it's positive it goes down when it's negative it goes up but you can see that the animation is pretty smooth right uh every time this element is rendered um it has this little simple animation you can actually do it for the access access as well and make it positive if you want to as well to move to the right but uh we're basically not writing any css and it already looks it already has the possibility of animating itself now another thing you might also want to do is determine some sort of initial state to your animation so for example we're only determining over here the end state of our animation if i want for example something else to be changed inside of my animation not only just the x axis i can say something like the scale of the actual square will start at zero and it will gradually increase to a hundred percent this is something we might want to do right well to do that we'll give over here the initial prop to this div then just say that initially the scale is zero but as it progresses and at the end it will become a hundred percent if you don't know scale uh is just this the the size of the element so as you can see it kind of gives this pop effect because it starts at zero and it ends at one and it already looks pretty smooth right you don't have to to do anything it it just it i don't know i really like the way uh from a motion animates its elements now if you remember i mentioned that one of the benefits of uh from emotion is the fact that you can you can integrate react stuff like states um into your animations and a great example of this is for example uh creating some sort of animation where when you click on the actual element uh or anywhere else it can be a button but in this case let's just click on the element uh it will trigger some sort of different um it will trigger the animation or a different kind of animation or a continuum of the animation right you can do a lot of stuff with this uh the example we're going to do is pretty simple we're going to create a state over here which it will determine whether or not we want to rotate the square or not right i thought that would be a nice example so we can create a state over here called rotate and we can say set rotate over here and then we're going to set this equal to react dot use state right and we'll set this equal to to to to false actually but basically it's a boolean and if it is true then it should rotate to 360 degrees if it is false then it should be zero degrees now if you remember uh like angles and and geometry this basically means that um if the animation is not working it will rotate and if it like if if this is false it will rotate and if it's true it will also rotate so basically what what this this effect will create is whenever we click on the element it will rotate in itself which honestly i find it really cool so how exactly would we do this well we'll just remove this over here we're not going to do the same animation as we had before and the animation now is pretty simple all we're going to say is we're going to say that the element will rotate but if rotate the state is false or it's true then it will become we want to rotate this to 360 degrees but if it's false we'll rotate it back to zero degrees now it is uh false initially so it is zero but in order to change this we're going to give an on click on this div which we can do and say that whenever you click on this div we want to set rotate like this to be equal to the opposite of what it is right now so if it is true it will become false if it is false it will become true what this means is initially it is false so the rotate value of this will be zero degrees meaning it looks like a normal square but if i click on it you can see it kind of shakes right all it's doing is kind of it is rotating in itself and now this is true so this is 366 degrees but if i click again it will keep rotating so now it has this little cool animation whenever i click on it now you can do other stuff for example instead of rotating i can try moving this whenever i click on it for example i can call this move and say set move then instead of rotating i'll say uh i'll move this on the x axis and say that if move is true then we'll move this 200 pixels to the right if it's false we'll move 200 pixels to the left and then all we're doing here is we'll say set move to be equal to not move the same thing we did before but now if we really think about the logic move starts as false right so this element will be negative 200 pixels but if we click on it it should become true meaning it should now go to 200 pixels which it does but now if we click on it again it will become false so it goes to negative 200 and you can go like this forever and it looks pretty nice this animation would be super complicated but it is not because frame motion makes everything look very simple another thing you can do with this is kind of add a delay to it so for example if i come over here and i use a transition prop which is very important in frame of motion i can give certain properties that uh have to do with the transition so and one example would be uh some sort of delay in the actual animation so to give a delay i'll just say something like the amount of seconds i want the delay to be i don't want to make it super big so i'll just put like one second and you can see that there is a delay before the animation is complete right so if i click now it should wait one second and then do the animation and that's exactly what happens same thing with this um it waits a second you can actually put this to like three seconds and obviously it will be way more um yeah it was waiting three seconds to go left and now if we click again it will wait three seconds to go right but delay is really cool if you ever need it this is how you do it but although delaying the animation is really cool the transition prop like i said is much more important than just that there's actually three different types of transitions that you can make using framer motion and i'll go over each one of them the first one is the one with the type tween and this one is very useful so you'll use it a lot basically this is a type of transition where you can determine the duration of it so if you don't like how smooth or how long it takes for the transition to complete from its start you can actually use the type twin and do something like that by adding the duration to this transition so for example if i want the transition to run slowly i can say that the duration will be five seconds and now you can see it runs a lot slower but it still runs the same but it still runs the same it's just at a different pace and yeah if i click again you'll see the same thing happens but if i set it to something like 0.2 you can see it's almost immediate right yeah it's almost immediate i don't know how small it goes but you can go you can see it's going pretty fast right um and this is basically what the tween type is now the next type of a transition that we can have it's called spring and this uh by the name you can imagine that it actually is used to simulate real life physics right and there's a lot of properties you can use with this the spring type there's like stiffness there's um bounce which is really cool uh bounces basically you can add bounce to your transition so if i add like i don't know 60 to it you can see whenever the transition happens there's like a bounce to it right you can obviously don't use 60 in this example because it is too much but if you do like five you'll see that like i don't know it's still go it's still pretty strong you can determine you can play around with the values but um it is used mainly to determine um like how your your element will will execute based on real life physics and the next type is the inertia type now this type is like the both the spring and the inertia types are mostly used whenever you need something very specific or something that is more like um physics-related animations but inertia is also really cool if you use the inertia type you can determine something like velocity and if i set the velocity to something like 40 uh you see it moves but it's acting as if there is some sort of resistance for resistant force um i can keep moving it by just clicking on it and you can see it it might have implications in your project i don't know if it does but uh but this is something i can do with it right it keeps moving whenever i click on it um which is cool but this is the last type of transition that you have in vermont motion now that we talked about transitions um i want to point out the fact that you don't really need to use the animate um property to make your animation happen um that property basically will render an animation uh after your component is rendered so after the div is rendered it will initiate that animation meaning that it might not be used uh useful for certain use cases right there are some some use cases which you need an animation to be triggered specifically based on some sort of event right um and firmware motion actually has a whole section on this where they focus a lot on on different ways in which you can interact with your elements to trigger an animation and i really wanted to show you guys some cool things that you can do with this so this is actually called gestures uh and there are a couple of different gestures that you can implement in firmware motion one is you can say that you want your thing to animate while uh you are hovering it right you can see this are there are four different types right so while you're hovering it you can say something you want the i don't know the scale of it to be um two right you're just killing it two every time you're hovering it and now if i hover it you see it grows in size right now this is something you usually you can do really easily in css but um like i mentioned uh you don't really just use uh you don't really just need to do something simple like this right you can increase in complexity um to a point where doing this in css uh wouldn't be possible and you can now do it using react right so uh there's more you can do with this there's also uh while you drag right and this wild drag is really interesting because it allows something really cool first of all if i just uh do the same thing i did with the wow hover and just say that whenever you're dragging you want to increase the scale by two right uh you'll notice immediately that um this is only triggered whenever you you left click on the element and tries to drag it right but what exactly is the point of doing something like this you actually want to see this element being dragged whenever you right you left click on this and move it around so if you want to simulate that and you want to animate your your element to do that all you have to do is you just have to put the drag property over here which means that now i can literally just grab this and move it around it's that easy right and you can see that if i drop it it does contain some physics to it which we can actually prevent it from moving around loosely like it's happening right now by adding some constraints to it for example if um and by the way i'm gonna remove this wild drag over here let's just be dragging it individually right if i want to only drag it in the y direction i can say that the drag is equal to y right and now it doesn't allow me to drag left but it allows me to drag up and down you can do the exact same thing for x and it will work perfectly now there's more than just this conditions for example i can come over here and say drag constraints and say that you can only drag up to uh for example um i don't know 50 pixels to the left but you can drag this uh about whatever you want to the right right we're not going to put any constraints any constraints to the right you'll see that now if i try pulling this to the left it will it will not allow me to move past 50 right it will drag back and it won't allow me to go any further but if i try moving to the right since there's no constraints it will allow me to do that perfectly which means um it is working and um there is constraints to our left and right elements right so basically this is what drag constraints is you can use drag for a lot of stuff there's a lot of cool stuff you can do with it i'm going to leave a link for some cool animations that you can either copy or just get inspired by which i actually really liked while looking at the code sandbox that i o for from emotion because i actually found a bunch of stuff while looking for this video the last thing i want to talk about is um how to actually implement um cont continuing animations right so what do i mean by that well um normal animations in css has something called keyframes where you're actually able to set your animation to keep changing depending on at which point of your animation you're in right over here we've seen that we can set an initial and an end to our animation so we have an initial state and an end state but by using keyframes we're able to um change the animation midway through determining where we are in the animation so if we want to do something like keyframes inside of our project we will have to animate so we'll give an animation property then let's try to animate this uh in a way so that it is consistently rotating on and and rotating back right it'll keep doing that we can do something like rotate is equal to and instead of putting something like 200 over here where it will obviously rotate to 100 degrees um we'll actually put an array where it will show you um the values of where it should be depend uh like in a sequential order right so it should start with zero rotation then go to 200 then from 200 it will go to zero and if we save this now if i save this you'll see that it keeps uh the animation goes from 0 to 200 and then 200 to 0 in a perfect way right now obviously it stops because it gots it gets to the end i can actually um use transition um like i mentioned in the past to uh make this animation last longer by adding the duration property over here and saying that it it takes like five seconds to finish the animation or something like that um but sometimes uh i want this to actually run forever right so to run forever i can actually make this repeat how many times i want and the repeat property comes inside of the transition over here i can say that i want to repeat this animation for example two times and i'll make this go quicker i'll make this one second and you can see it will rotate twice right it will do the animation twice i'll refresh it again and you'll see once and then twice right now if you want to make this forever i can just say infinity over here and oh i forgot to put the count comma and now as you can see it will run forever you can actually make some other cool stuff with this like instead of just adding a rotate to this you can make this rotate while it also moves in the x direction i can say that by keyframes it will start at 0 then go to 200 then from 200 it will go to 0. and you'll see that the animation now will keep moving back and forth while doing the rotation to make it even cooler i'll try to do from 0 to 200 then from 200 to 0 then from 0 to negative 200 and from negative 200 to zero and you'll see uh it looks kind of funky but uh but you can see at least it's working um and keyframes are really cool they're mostly i use a lot of it uh whenever i do animations like this and they're very important if you want to make your website look cool which is exactly what i'm doing with this over here so yeah that's that's basically it i really hope you guys enjoyed this video if you enjoyed it please leave a like down below and comment what you want to see next subscribe because i'm posting every week and i would massively appreciate it if you guys could help support the channel and i hope you guys enjoyed it and i see you guys next time [Music] [Applause] [Music] [Applause] [Music] [Applause] you

Channel: PedroTech

Views: 112,228

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, framer motion, framer motion react, framer motion tutorial, framer-motion react, react animations, react animation tutorial, reactjs animation

Id: GOuwOI-WSkE

Length: 23min 31sec (1411 seconds)

Published: Thu May 19 2022