Framer Motion (for React) #5 - Transition Options

Key Takeaways

or rather my friends so so far we've seen that we can use the initial attribute and the animate attribute to animate different CSS properties from A to B so from initial to animate but what about controlling how that animation works what about its duration or some kind of easing function or maybe a delay but for all of that kind of stuff we can use the transition attribute now the transition attribute describes how the animation transitions from start to end so from initial to animate and to control it we use the transition attribute like so and set it to an empty object to begin with then it can add some different properties in here to control that transition so for example I could add in a delay property and set that to be 1.5 seconds and that means I want you to delay this animation don't start it until 1.5 seconds is up so if I save this now and go to the home page then we can see it's a little bit longer before that animation starts another one we can do is the duration so if I set that to be 5 seconds for example then this thing right here going from 0 to 1 is gonna take 5 seconds but it's not even going to start for 1.5 seconds so in essence is 6.5 seconds in total so save that preview and notice it fades in very slowly now over 5 seconds now I'm going to change that to 1.5 just to speed it up a little bit because I did think that was a bit too slow and that looks a bit better okay so let's now go to the header and add some different transition properties to this thing down here where we animate this div so again I'm going to say transition is equal to an object and inside this object the first thing I'll do is set a delay of not 0.2 seconds because at the minute it animates straight away I want a very slight delay before it animates in and we saw that they're very subtle okay so we have that delay now now another property that we can add to the transition object is the type property now the value of this could between inertia or spring one of those three things and they all results in different types of animation by the way don't worry if you don't remember all of this you can always check out the docs for a reference of the different kinds of things the most important thing is understanding how we construct these animations and delays don't worry about remembering every single property so anyway the type can between inertia or spring and they all result in different types of animation now at the moment the default value for this thing right here is spring and we can see that if I was to come over here and refresh it's kind of like a spring the way animates in it bounces a little bit now if I came over here and added the type property to this and set it equal to something else like tween and tween is more of an even transition I mean we can apply easing functions to this to control how it transitions but it's not got that springy bouncy effect so if I save this now and preview and refresh its get a lot much more uniform in the animation we don't have that bouncy springy effect anymore so I'm gonna change this back to spring now I don't have to manually say that because the default type of this thing was spring and depending on the type of motion we have like you said this defaults to a different value different types of animations have different default values okay but I'm going to explicitly add that on so we know at a glance what type of animation this is now I'm also gonna add on a stiffness property and we can only use this if we're using the type of spring we can't add this to something that uses a tween or inertia so I'm gonna set this stiffness to be 120 now the higher the number the more stiff this kind of spring will be so if it was 500 for example then it would be a very stiff kind of springy animation let me save this as show you and we can see that it goes up and down quite a lot if I change this to just 5 it's not going to be very springy and you'll see it's much more slower and virtually no spring at all so I'm going to set this to be 120 the default I think is about 100 so I'm just making it slightly stiffer and we can see if we refresh this that looks quite nice so like I said this can only be used if the type is spring and by the way duration as well this right here can only be used if the type is going to be between so this type right here the default type of this is tween right okay let's move on and transition some other things so the next thing they'll do is add a transition to this button right here remember this is this thing if we go over here and this button zooms in that's what that transition is all about all that animation all let's now add a transition property and inside here I'm going to say explicitly that the type is spring and like I said I always like to explicitly write out the time when I need it to avoid any kind of unwanted effect and also just to see at a glance what type of animating this is now because this is spring I can also add on a stiffness property which I'm also going to set to be 120 so this to be honest is not going to alter this animation that much it's just gonna make it a little bit more springy that's all okay so that looks pretty good to me there's one more thing I would like to do and that's to actually animates in this container right here this whole thing and I want it to zoom in from the right onto the screen so let me do that by first of all turning this div into a motion div don't forget that step I often do it's a very easy mistake to make so I'm going to alt click both of those positions and say motion dots so now this is a motion component and we can add on the initial attribute first of all and the initial attribute is going to say that the exposition should start at minus 100 V W in fact no not - it should be positive because I want it to go off the screen over to the right - would take it off over to the left so that's the initial position and now I can go to the animate property so animate and set that equal to an object where X is going to go to 0 now I'm also going to do a transition so transition is equal to an object and the type again I'll explicitly say is going to be spring and also I'm going to say that the delay on this is going to be about not 0.5 seconds so when we go to this page it's going to wait not 0.5 seconds before it starts this animation and brings it onto the screen so we can see now that that comes onto the screen that's pretty nice I'm gonna go to the home page and then navigate to this so create your pizza it waits and then it animates in awesome so there we go that is transitions and that's how we use them to control the animation we are going to be using them much more as we go forward but next up we're going to take a look at hover effects and animations when we hover over elements