Framer Motion (for React) #3 - Animating Elements

Key Takeaways

a rather than gang so the first thing that we're going to do is look at how to create some basic simple animations now to do that we'll be working here inside the home component and we're just gonna try animating the text the button and also this div which surrounds everything as well so the first thing we need to do is to import something from the frame up motion library remember we installed the frame emotion library at the start of the last tutorial and it was this library right here frame emotion that got installed when we said npm install so now we can just import something from it and that's something is motion so I'm importing motion from the frame up motion library now the way this works is that if we want to animate an element we make it into a motion elements and that basically means that we just say motion dots whatever elements it is and then if the element has a closing tag then we say motion dots at the end as well now this returns to us a new motion component which will still be an h2 when it's rendered to the Dom but now it comes with some extra abilities that we can use to animate this element so how do we do that well all we need to do is add on an animate prop so I could say animate is equal to something and it's going to be something dynamic hence the curly braces now inside this animates prop we need to pass an object and this object is going to represent the different properties of this h2 that we want to animate so for example I could say that I want to animate the font size to be 50 pixels we don't need to say pixels we can just say 50 frame emotion figures that out and that means that now when this component first loads it's going to see this animate prop and it's going to animate this to be this size so if I save this and come over here and we'll go to the home page we can see this straight away we get that animation to this font size okay so this is basically just animating a CSS property except that this is camelcase we don't use hyphens like we would in CSS we use camel case for words instead so we can pass in a lot of different CSS properties inside this object and it's going to animate each one of those so I could also animate the color which will be a hex code and I'll just say hex and this is FF 2 9 9 4 so if I save this now come over here and refresh you see animate the size and the text color alright so what if I want to move this around on the page well what I could do is use an x and a y property now these are not CSS properties we don't say x and y in a CSS rule so these are more convenience properties added to the frame emotion library for us and this basically just translates the elements to the left or the right the Y property would translate it up or down so if this is a positive number it's going to go to the right if it's a negative number to the left and if the Y is a positive number it means it's gonna go down and if it's a negative number it's going to go up so let me just test this out I'm gonna say X is 100 save that and come over here and we can see it moved to the right a little bit and if I say that Y is going to be minus 100 and save that then we should see it move up a little bit let me refresh and we can see now it animates to this position as well as the color and the font size awesome okay so let's try animating something else I'm gonna try animating the button so again remember we need to add motion in front of the button there and also in the closing tag so I'll alt click there as well and say motion dots now we get a motion button and we can add on the animate property now what I'm gonna do is put these props on the next line because they can get quite long and it makes it more readable the more props that we have so I'm gonna do that down here as well come to the next line and say animate set that equal to an object and inside here I'm going to say the scale will be 1.5 again this is not a CSS property it's a frame emotion convenience property so we can add CSS properties but also the convenience properties as well now this is going to make it 1.5 times bigger when we first load the page and we can see that right there cool okay so now let's do this div at the top again we need to do motion at the start and the end so motion dots div and the opening tag and the closing one then I'm gonna come to the next line and say animate and set it equal to an object now inside this one I'm gonna say margin top is going to be 200 so it's going to bring it down a little bit and animate that let me save it and preview now we can see go down and I'm also going to say the opacity is going to go to zero point two so it should only be very slightly visible on the screen save that and we can see now the opacity is animated as well and then finally I'm gonna add another property that is going to be rotate and then it's gonna be around the z-axis now the z axis is the axis that goes into the page and I'm going to rotate it around that by a hundred and eighty degrees so that it should be upside down so let me save that and come over here and now we can see it's rotated downwards like that so hopefully now you can see how easy it is to animate properties of our elements and I get that this isn't great and we wouldn't animate anything this way I just wanted to show you how easy it is to actually animate these different things so the important things to remember are first of all that we import motion from frame up motion then we add motion dot to whatever element that we want to add motion to if it's a self-closing tag just add it at the stances there's no closing tag then we use the animation property inside and inside that we can pass an object and that object is basically CSS property and value pairings as well as the convenience properties that we've seen right here that frame emotion ads now before we finish I'm just going to delete the h2 motion property completely because I don't actually want to animate this in the future I was just using that to demo a point so let's get all of this on one line again and I will keep the animate prop there but I'm going to delete the object inside of it so we can work from a fresh in the future and the same for the button so that now we shouldn't have any animation Oh in fact we get a problem let me just put an empty object into these it's complaining that we don't have one so let me save that okay there's no animation but in the future now we can come to these different elements and animate them