The Right Way to Animate SVG in React

so if you're struggling to animate your svgs like we have in here our alien spaceship taking it from like figma an SVG like a regular SVG into a completely awesomely animated SVG inside of a react application so in this video I'm going to go through how you can actually take an SVG from figma or any other Vector software export it the best way to optimize it and import it inside of your react project plus like converence into a react component finally animating the whole SVG in here so it looks pretty pretty sick for your next startup the same way we did it right over here so as developers we all know what svgs are and we've like interacted with them at some point of our lives and we all know that svgs are like scalable vector graphics that stands for SVG and they're just basically xmo based Vector images and they are like two-dimensional not 3D or anything and the Bummer thing they've been actually around like the initial release was in 2001 which is literally more than 20 years ago but the bummer thing in here and the most shocking part is actually there I found a lot of developers newbie web developers particularly including myself Al was struggling with like understanding SVG and they always intimidate me and actually give me hard time whenever I I stumble upon an SVG and I try to like integrate SVG into my application or parts an SVG or animating an SVG Yes you heard me right animating SVG is sort of complicated it might seem complicated but it's actually really really easy if you use the right tools and you follow the right instruction so let's imagine we have these two svgs inside of figma I'm here I'm using figma and I have these two alien spaceships in here which are of course in both of them are vector graphics I'm actually going to go ahead and try to take this and actually put it inside of a react application and try to animate it and actually see how we can actually animate for example because this is actually a spaceship right because this is an alien spaceship so we want to see this like hovering over and we want to see the power in here or you know like when a spaceship puts its line and tries to pull things up into the spaceship itself so something like his taals or kind of like kidnapping sort of people or anything so trying to actually also animate in here like the kidnapping or sort of like the magnetic field in here I'm going to call it a magnetic field or a powerful field or something so you're going to see how you can do that inside OFA so always always when you starting with an SVG you got to actually export your svgs the right way so for that before you exporting ASC in here I have two versions of the alien spaceship the first one in here from the left hand side I have the spaceship which is not optimized so if you look into this one actually click on it this is actually a frame inside of figma so if I clicking this one it's actually a spaceship it's not optimized let me see why this is not optimized if you open that one and actually look into the vectors themselves as cly we see the first Vector in here uh second Vector is sort of like the you know the circle that goes around the spaceship to build the spaceship and I have like two groups in here one for the power group and the other one for the rest I mean it might seem good and everything but it's really not that good for any SVG so you first need to actually name your vectors and you need to put them together like group them or put them inside of a frame together in order to be able to actually let figma so whenever you're exporting the SVG whenever you put figma can actually help you take you know the naming on the vectors or basically the frames or the groups and actually puts them as IDs on the actual HTML elements or more of like the SVG elements so for example this is not optimized let me look into the optimized version in the other hand if you open that one both of them is have two separate frames first is actually the ship the second one is the power in here so the ship in here if you open it up we've got like a bunch of vectors to build the SPAC shape which is you know pretty good so all we need in here is just like to frame this selection to basically get the you know the whole shape as together and you got like the power in here if you look into it it has a bunch of vectors as well now if you go on the right hand side let me just select the frame first so this actually our you know the whole frame that we want to export the whole SVG frame we go to the right hand side we go to export we select the SVG of course and we go to those little dots in here to the export settings and now you have to take ignore overlapping your so you can have like a like a transparent background and the most important part is actually you have to take and check mark and check the include ID attribute this actually is going to tell figma to use the frame names and then group names in here as IDs for the SVG elements so once you do that you can actually preview it or whatever and actually go ahead and actually export that now if you go inside of your editor vs code for us in here actually import the SVG we've just exported using figma and open that one in as as clearly see here you're going to find a lot of paths a lot of complicated stuff but what you actually should notice on this G in here stands for a group so it's actually like grouping a bunch of paths or element like SVG elements together so this clar in here it actually put the IDS for us so for example we have spaceship so if you go back to figma so we got like the whole frame which is you know the spaceship itself inside of it there is a ship and inside of it there's actually a power so if we go back in here with have the power group in here which is the child element so we scroll all the way down in here and we should find the chip so that c in here on the group we have our ship in here and to better make sure that we're actually dealing with the right elements we think we are and actually figma did the right job so if you just go ahead and remove that one clearly it's gone if you bring it back back it's here so actually the first step to do that is actually to export your your svgs the right way and make sure you have ID so you can tell exactly which element is doing which and what path is actually belonging to what group and y y y because all the paths in here are very you know if without an ID you won't be able to exactly tell which path belongs to which part and everything so it's going to make it a little harder for you to distinguish and actually work with an SVG by the way there's actually a vs code extension that allows you to preview an SVG alongside of it in here it's called called SVG preview you can download the extension if you ever wondering what's that actually all right so the next step in here is actually to take the SVG and actually turn it to a react component of course this is now it's like a SVG it's an SVG file you can import it you can render inside of your react components and y y but you cannot actually manipulate that way you cannot like you cannot animate the things you can't for example tell it to animate this depending on like if a prop is in or out you can hide it in or you can change the background color on click or whatever that that is so we going to convert this into a react component so you can add the react reactivity or more of like interaction with JavaScript so we can interact with the SVG and animate it as we want so here we can just go ahead and actually copy the whole code for the SVG go back and go to a website called SVG so if you like Google search SVG playground or like SVG to react components it's going to take you to this website in here so this if you just give it whatever in here if you give it an SVG it's going to out output for you a react component so all you got to do is just copy that paste button but there's actually one thing so you got to take or tick and check the typescript in here if you're using typescript and you go all the way down here make sure you have named export instead of default I don't I'm not a big fan of default exports and if you go to the svgo config in here you just remove because sometimes you find a configuration here just remove and leave like plugins array empty so you can have IDs in here like available and still preserved and the output in here here and that should be it actually so now we can just go ahead copy your component I don't need that again copy the component go back in here and I'm go to my components and actually name the component so the naming convention is more of like you name it exactly what the component does for ex for example for us it's actually a spaceship so we do spaceship and it's better to prepend or append like an SVG at the end in here for a better neon convention for everybody else on the team or either you in in the near future to come back to you know the The Source going and come oh this is actually an SVG react component so you just put TSX now because I'm using typescript and I can just go ahead and paste that one all right cool so let me just go ahead and rename this component real quickly so I'm going to do spaceship all right cool now we have a react component the next thing in here to make it actually adapting to The Container because this actually an SVG and when you render that one inside of a parent container like a div or something you want this SVG to take full width and height of the depth so you can control it outside right so for best way in here is just go ahead and comment out the width and height and leave the view box because the view box is very important just leave the view box and comment out the width and Heights and that's it so you just save that one if you go to the up. CSX in here and actually render the thing so I'm going to go ahead and render spaceship SVG so we go back to my local host in here there you go so we got our spaceship in here and the most important part in here I'm actually controlling the width and height using this you know width and height using tewi so if for example I make this like a 20 I culy just like adapt to The Container width and height now it's actually the time to animate the SVG or the paths or the parts of the actual SVG so you can basically do this however you want from like CSS to vanilla JavaScript whatever like any animation Library could work but of course for react I would definitely recommend frame motion because it's it's really really nice and easy to use plus it's actually made specifically for react devs so you can just go to Quick Start in here installation you can just do mpm inst start frame motion and you just import the motion here from the frame motion library and that's it so I can go back to inside of my SVG in here like the spaceship SVG I'm going to scroll down all the way down in here and I'm going to go ahead and find the ship so I'm going to want to animate the ship so instead of the G in here for using framew motion you got to import the motion and of course for importing the motion you're going to go all the way up in there so you do import motion from framew motion okay you go back down there do motion. G which is going to replace you know the standard G SVG elements in here and that's just going to make it work with the frame or motion animation API all right that's pretty good now what I actually want to animate and how I want to animate the spaceship in here so I want to of course we all know Alien movies and we all watch Alien movies and know like alien how they actually have their spaceships so I want it to be like hovering around so where like the spaceship is top and going like on bottom a little slowly and going back top and bottom just like really really slow do you know how that actually looks it's kind of like h over and over it's not like still but it's more of like over and over I guess that would make it look pretty good now I'm going to use of course the frame motion API and first we're going to start with the animate so the animate in here you telling exactly which property you want to animate and of course for hover and we want to animate the Y property so you can go up and down slowly so it goes from likeus 40 pixels to zero and back to minus 40 pixels so you're doing like a you know CSS key frame animation simple as that and here for the transition is actually telling how how it transitions for that particular animation so the times in here you're going to tell it to use a key frame so going from like 01 which is pretty simple for the duration in here I'm telling it to go for 5 seconds repeat is infinity of course I always want it to be hovering around never stopping and the typ in here I want it to be key frames because by default uses pring animation which is not perfectly for us right now so key frames is the best one and for the ease function in here I want to use ease in and out so it just goes smooth in and smooth out okay so I'm going to save that one and Screen here it looks pretty nice it kind of like goes top and bottom really slowly so it looks like oh the aliens are like you know hovering over the ground and of course it's not just about doing wi animation here or animating the wi position you can actually basically animate anything from like the scale for example to go from zero to one back to zero if you want to test that one it's oh the spaceship is like coming or something and going back I mean you can literally do anything as you would animate a normal noral HTML elements you would do the same thing for SVG elements now because you actually need react component and you can control everything using JavaScript or typescript now the next thing I want to animate is actually the power in here or you know the magnetic field in here so I want to animate those strips in here like those lines to go all the way up in here so it looks like it's pulling something inside of the spaceship so it would look pretty pretty sick so of course we need to go to the Power Group in here that we have already you know grouped inside of figma it's pretty helpful and each path in here is going to represent a single line so we got like I think nine Paths of those so like nine lines so of course the simplest way the simplest approach for the animation you just you convert this into a motion path and you put the animated in transition the same thing we did for you know the spaceship before and you can just tell oh animate the Y in here to go from you know 1 12200 to 900 in here and for a different opacity of course and it just like animates pretty well so if you look into this one it's actually what the animation looks like it tries to go up but it's going to be a little harder when you try to you know copy paste for all the lines in here because we got to copy paste for all the lines and if you do it it's going to look pretty pretty ugly for example if you copy paste and put it into every single path in here you go back this is actually what the animation looks like it's not really that realistic it looks a little stupid cuz all of them go at the same time which isn't exactly what we wanting so what we want is actually to have some Randomness in between where each line is going up at a different duration compared to the other lines so this way you can create some variety when you know the lines is going up and everything so it looks a little more natural so instead of doing it that way I just commented out everything all the motion paths in here and actually copied all the D paths in here so like the D property in here I copied all the values for each one of them for the nine paths and actually put some inside of an array so here I named this power paths and if I go back down below in here and it did like power paths. map and actually mapping through every single path so going through every single path in here I'm rendering a new motion path and passing the path parameter so just matches every single path I have you know fill in here to be one and everything and now actually I can randomize the list a little bit because I can say the why it could be you know not like good 1200 to- 900 and a pass the same thing but what I want to randomize actually the duration for each one so I'm going to use the index of each element inside of the array so for the index in here actually defined by the power lengths or power paths length so this time it kind of creates some you know Randomness and it can have different duration for every single line and there you go this is actually the result and SC in here the lines looks a little kind of randomized and they going up in different you know durations in here which looks pretty more natural compared to the previous way we had it and looks pretty pretty sexc in here every single line like all of these lines actually coming up from from this Border in here to here and actually having opacity to go zero I think they are actually going passing up in here as C see I can I can see them on the top so I can actually fix that by just making this you know 600 or something and they would actually look pretty good so if we try to look into this one yes it looks absolutely perfect and now we have our spaceship over and over and actually doing its magnetic field and kind of like kidnapping uh on top of this aliens are coming text and whatever this looks pretty sick of course if you go in start a frame motion you're going to find a whole section for doing path animation in here so if you want to look into how it works and everything theme that would be pretty cool as well so anyway guys thank you for watching hope you guys enjoyed and catch you hopefully in the next ones

Channel: CoderOne

Views: 19,568

Keywords: react, svg, svg animation, react animation, js animation, javascript animation, react javascript animation, react svg, react svg animation, svg in react, import svg react, animate svg react, svg figma, export figma svg, figma svg react, svg css animation, svg typescript

Id: SrmTDrN1lkU

Length: 15min 36sec (936 seconds)

Published: Mon Oct 23 2023