Framer Motion (for React) #15 - Animating SVG's

okay then gang so in this video I'm going to show you how we can animate SVG's in particular this one are right here that I've already created and this is defined inside the header component right here now this is the SVG I'm not going to go into any great depth about how we create SVG's manually this is not an SVG course but if you want to learn that it's pretty simple just google SVG tutorial and there's plenty of those out there now in our case we have two paths right here and each path represents a different part of this SVG so this path and this a lot of coordinates represents this big path at the bottom the big part of the pizza and this smaller path right here this represents the small part of the pizza now I realize that this probably looks more like pac-man eating something than it does a pizza but nonetheless I'm going to show you how to animate these paths regardless so these things right here these D attributes these are the coordinates that make up the path and that's how they're kind of drawn onto the page and that's eventually what we're going to animate these path things but first of all I also want to animate this so there's three things in total we're gonna do we're gonna animate this SVG itself by rotating it I don't know 180 degrees or something like that then we're gonna animate this path then we're gonna animate this path right so they look as though they're being drawn on the screen and it's the path length property that we're actually going to animate so first of all let's do the SVG and I'm going to use variance to do this so I'm going to say const SVG variance is equal to an object and inside i'm going to create a hidden property first of all and to begin with this is going to be the initial state I'm going to say rotate and it's going to be minus 180 degrees so this is the initial state it's being rotated backwards to begin with now we also need a visible and to be honest it's never going to be hidden so we could have called these initial and animate but it doesn't really matter and this one right here visible is going to be rotate back to zero its original position and also we're going to add a transition property whereby we set the duration to be one second like so so now I could apply these variants to this SVG so first of all remember we have to use the motion component right here so we say motion dots SVG and down at the bottom we say motion dots SVG as well and then in here we can say the variance are equal to the SVG variance okay now we also need an initial attribute so let's set that equal to hidden and we need an animate attribute and set that equal to visible okay so let me save that and approval and if we just refresh we can see now it rotates a little bit on its own it doesn't look good but it will look good when the paths are animating as well so now let's create some paths of variance for these two things the both going to use the same variance object so we'll just create one and let's call this path variance okay let me set that equal to an object inside we have a hidden initial state and the opacity is going to be 0 to begin with so it's going to fade in over time also the prop I want to animate is going to be path length now if this path length is going to start at 0 and the path length is the length of the actual path that makes up this SVG so to begin with it's going to be 0 so the pen will be kind of hovering over its initial position but it won't have actually touched the screen yet to draw anything if that makes sense so later we're going to animate this to be a path length of 1 and what will happen is the pen will kind of drop down onto the screen and draw in time the full SVG path okay so this is our initial state now we also need a visible property and that is going to have an opacity of 1 so it goes from an opacity of 0 to 1 but also we're going to animate the path length to one as well okay and the transition here it's going to be an object whereby the duration will be two seconds it takes two seconds therefore to draw this SVG and the path length to go from zero to one same for the opacity and also we're going to use an easing function and this is going to be ease in out okay again you can play with these this is just one that I thought looked good you can find a whole list of these different functions on the frame emotion documentation okay so let's apply this path of errands to these paths over here now first of all we need to say motion dots path right here and it's self closing so we don't need a second one at the end and also motion path right here now we can add a variance attribute to each one of these and it's going to be the path variance like so and I'm gonna do the same thing for this path now we don't need to explicitly say we want the hidden and visible to be the initial and animate because it's going to inherit these two lines right here okay so let me save this cross my fingers and come over here and now we can see it draws this SVG on the page and that looks pretty nice and how simple was that to animate an SVG just using a couple of different properties the opacity the path length and also this rotate property as well so really it doesn't matter how complex your path is for your SVG's you can use just a few properties to make it really stand out when it first loads on the page and that looks really kind of slick and nice

Channel: The Net Ninja

Views: 28,195

Keywords: framer motion, framer motion tutorial, utorial, react motion, react animation, react animation tutorial, animation tutorial, react framer, react motion tutorial

Id: ILxNdOtKbNQ

Length: 6min 9sec (369 seconds)

Published: Mon Jun 08 2020