Learn To Build An SVG Animation With CSS

hey there my gorgeous friends on the internet TS I shaved I look 12 so that's exciting exciting times here on the dev ed channel anyway what I want to cover today is some SVG animations because a lot of people are interested in those and a lot of people don't really know how they work so I want to give you a quick little tip and trick on how you can achieve them now I'm gonna cover this also in my course so you can get more practice there but let me kind of give you a quick look on how we can do this have a mosquito here in my room oh go away and a burn you well that has nothing to do with the tutorial so let's get going first thing we need to do is actually get an SVG so oh no this is the finished product now let's close this up so what we are gonna do for what for once we can just go to on draw okay because this is super easy super simple and you can use these for free alright so let's kind of pick one of these out but you can also make your your own SVG's or you can find them in other places but for now let's create that bike and I used on draw for this so the first step is to find the bike and the way you can do that is just go to search I'm gonna say bye good bye good hit enter and this is the guy here so I'm gonna hit download and after I had download I have the bicycle down here okay open with Internet Explorer lovely alright let's close this up know why you do this why you do this I deleted the thing are you kidding me let's download again okay and what we would do is I highly recommend you to use this with figma because it's very easy to export things it's free its prey you can export things the way you want and also it's very easy to do slight edits to it so what I want to do is mean this is the finished one so let's make a new one so I'm gonna hit the plus symbol up here class okay I'm sorry let's calm down and what I want to do is we can just drop in the SVG so let me go here drag it drop it bum-bum-bum amazing amazing okay so what I want to do is open this up here and as you can see we have a ton of these small little files so what you want to do is kind of group up everything the way you want to animate and kind of get rid of the things that you don't want so this plan I do not want so what I want we'll do is just kind of scroll down here all the way till I kind of get to the planting so it's around here high so this thing I can toggle it on and off the upper part here this is the plant as well so kind of from here let me scroll down as you can see it kind of highlights the thing there as I scroll down all the way okay so till the almost the last one I'm going to select everything here and just get rid of it another way you can select it is you can just double click on it like this or click once if it doesn't select it you can just click once you can kind of manually get rid of it like this okay nice okay so I don't want that and we were also gonna find that this kind of has a lot of shadows in so there's one there's one so you kind of want to simplify your shapes as much as possible now to be honest let's let's keep all of these so what I want to do is again just kind of group everything the way I want to animate so if I want to animate this hat I want to group this and its own things so as you can say can select the Hat like this and there's also that shadow below it so I'm gonna select that as well so this weird shadow okay so I'd go back here actually you know what if I drag this let's get rid of this whole big shadow thing click delete all right I'm gonna move this head back something like that okay so we have the Hat let's grab the Hat I'm just gonna hit ctrl G that's gonna group it up and I'm gonna name this hat all lowercase hat okay next up what I want to do is kind of mess around with this background color so I'm gonna select this let's go to linear here I'm just gonna create kind of a a nicer looking color let's drag this kind of in this direction and I want to increase the opacity of this and as you can see you cannot see it that well and the reason why is because this has a past true of 10 so I'm gonna just raise this up to 100 okay and let's kind of mess around and get the interesting color so kind of like an aqua looking thing that and here let's kind of go what they and then now something like that that looks kind of cool okay I'm happy with that next up what I want to do is also kind of change these colors here so I'm gonna click here and select each one of them and maybe do like a darker gray something like that somebody honked hello okay so now I can just select each one of these that hit I and then just kind of change the color of it okay there we go we are painting today oops alright so this doesn't work why doesn't work out because there's this stupid shadow underneath now let's get rid of that I and I and actually again another shadow here let me get rid of that actually let's do the darker part here let's do the wheel color and that okay perfect so I got everything the way I want it to look so now it's grouping time so we have the Hat I'm gonna bring this actually drag it all the way up here okay next I want a group basically what else do I want animate well I want to animate the wheel so I'm gonna grab this part let's see we have these I'm gonna hold shift grab this and the wheel let's see okay we grab the whole tank there's that little dot but the dot so I'm gonna hit ctrl G on our D selected so I can move it around first to see what I have grabbed ctrl G alright as you can see it groups it here so I'm gonna rename this to right wheel like that and then we'll do a tea to the other one as well grab this whole chips grab all of these ctrl G group there's gonna be left wheel okay perfect so I can actually turn these off for now so I can see kind of what else is left here so all of this section I'm actually gonna grab everything let's also grab the background and turn it off and I'm just gonna grab everything here like this and kind of group everything together as well I don't know what this is let's get rid of this group everything together and name this man on the bike or man bike okay and that's it that's all we need to do so now we can turn everything back on even the background and now we can export this so I'm gonna click on the parent element here and I'm gonna hit export now this is very important so pay attention pay attention we're gonna switch to SVG okay and then we're gonna hit these three dots and it's very important for you to click here include ID attribute so this way when we export everything these are gonna have an ID so the Hat is gonna have an idea of hat the pipe is gonna have an ID of man Pike and the right wheel is gonna have the idea right wheel so now we can just export this whole thing and we can straight up jump in and animate it in CSS amazing Sigma oh my god they're almost better than alig mo okay so let's go on this make sure we have those selected export and we're gonna bring it I already made a file here let's create another one like we like this alright and we're gonna save it there so let's open I'm gonna rename this bike bike guy alright that's defiling save and we are done we can open up our favorite photo editing tool via Visual Studio code alright and let me open up that folder so the bike boy okay so here let's just kinda trow together our index.html on our CSS then let's generate a fireball and by holding shift and one tab and that's gonna generate this let's rename this to bike and here what I want to do is copy everything over yeah I know it's gonna be crazy and reason why when we want to copy everything over so we can animate these individual paths okay so this has got make your HDMI look ugly but hey I mean you cannot get everything nice and life so let's go up here let's also create a style the CSS like this and what I wanted to just kind of add a let's remove the basic styling margin:0 padding:0 and box sizing bow the box and it's safe okay let's open this thing up so we're gonna hit go live there we go so this is what we have okay we can grab let's just add the body and kind of move this and the center to small D text-align:center okay that doesn't work okay nevermind let's drop it inside a div okay there we go drop it down here oh my goodness oh my goodness all right there we go close this up let's move back up here oh we didn't have the stylesheet linked that's why it didn't work oh cool um stylesheet well now it's aligned in the middle amazing talking so that was useless anyway let's move on to the next part where we are gonna create these key frames so now all I need to do is literally just grab whatever I want to grab so let's see I want to do the right wheel and I can straight up to CSS animate this because figma did it for us so I just grabbed the element here and down here I just create keyframes and I'm going to name this wheel and what I wanted to save from and - so what do I want to animate I want to rotate it like this boom boom boom okay so what I want to do is save transform rotate and we're gonna rotate the Z angle and I'm gonna do 360 degrees okay actually we are moving from zero to 360 so let me copy this here and change this one to zero okay and here what we can do say animation we can say wheel we can do one second YZ and see how that looks oh no well that's not what we want can spins around like that so if you have this issue there's there's a super simple way you can fix it what you can do is you want to make sure that the position that it rotates is actually in the center here so the rotation position so what you can do is you can say every time no origin something with origin transform origin so we can get this transform origin and we can say Center it's safe now it's better but it still kind of rotates around this SVG thing Ryan cell even though it rotates from the center up there it kind of still takes up the space of this whole big thing so to fix that issue you can actually add something called transform box so let's go to transform box like this as you can see it says the transfer box defines the layout box - which transform and transform origin properties relate to we can do transform box and what we can do say fill box and this is gonna fix everything up nicely so let's take a look refresh and it's spinning awesome so what I want to do is actually change this from just add infinite here I want this to go forever as you can see it goes forever but the problem is it kind of slows down a bit and then it starts again so what we need to do is change the easing we want to switch that to linear so it keeps a constant speed throughout the whole animation so if we change it to linear oh no it's not working why is it not working and it doesn't work because I added ease here so let's get rid of that hey it's spinning the way we want perfect lovely we can slow down the bit maybe two seconds is fine okay so something like that now we can do the same thing to the other wheel so I can just add a comma here and I can see left wheel it's safe that's gonna give me the same result okay so let's kind of do do some animation with the guy that we have here so what we can do is take a look one name that we pick we can actually get rid of this SVG but it's a bit nicely organized here so we can get this man bike okay so let's target the man bike like that and this guy is gonna get another keyframe so let's say keyframes I'm gonna say bike to this and let's do what we can do is see transfer that's from and - and I'm gonna make it like he's bending over a bit like going down like he's riding the bike so what I found looking good was something called transform and we can do rotate X I'm gonna do zero degrees here and down here I'm going to transform rotate X 20 degrees all right let's take a look how that looks so we can go back here to miss the man bike and we can add a animation we can do bike let's do one second ease in and out let's do infinite and let's take a look how that looks all right that looks weird and it kind of jumps back to its original position so what I want to do is add alternate and that's gonna fix that it's gonna alternate between those both motions but here's what I don't like you see right there this kind of lifts above the wheels and it's kind of floating so again I can change that transform origin and I can add it to the bottom if I want so this position always stays there and it basically it animates from this position so only the top part is gonna change so if I add the transform origin no transform origin and I'll change this to bottom it's safe there we go that's much much better it's not perfect but it's way better okay so that's that one let's also animate the Hat this is optional but you can do it and what I did here was I just just did another keyframes keyframes a say hat and from let's do two and all I did was add a transform translate why I believe I was like 20% actually 0 to 20% or something like that let's do Turkey and 0 here save and let's also add it to the hat so let's go up here and say hat this is gonna have an animation of one second it's called hat one second is in and out it's gonna be infinite and alternate save okay that's not good something fell on the ground I apologize so let's kind of mess around with the transform origin and the fill box let's kind of copy over these two transform origin and transform box and paste them here okay much better there we go so now it kind of moves with the head so that was quite okay and you can kind of mess around with this let's try top transform origin talk okay let's go back to Center maybe change the speed up this let's do 40 so kind of moves on his head yeah so kind of bumps a bit up and down and dependent from that you can also do a spinning if you want rotate Z zero degrees and then maybe we can do a rotate see of 20 degrees that crazy I kind of like lit up like that alright kinda experiment with this ey chicken come up with but as you can see how easy it is to make these as CSS animations with SVG's alright so thick mouth makes it real nice with um is free so have fun with it and I will see you in the next one okay so that's gonna be it hope you enjoyed it please create some animations sent it to me I want to see them all I'm very excited also a lot of people been asking me where I'm gonna host my course and if you don't know I'm gonna do it basically on my own website I'm going to create a new website and the hosting the videos are gonna be hosted on teachable which is kind of a online platform for courses right so I can pay them a monthly fee and they're gonna host the course for me and they're gonna take care of any payment processes all right so it's gonna be very convenient for all of you the cool thing is I can make my own discounts and do kind of whatever I want so that's gonna be exciting so there we go that's gonna be it I know a lot of people wanted to see the course on udemy but I'm not gonna post there because there's so many issues with that platform if you wanna if you're interested in why I can make a separate video on why they wanna host it on udemy so let me know in the comments if you want to see that and I know a lot of content creators are also jumping over from you they need to create in kind of their own platform so yeah that's gonna be at sea on the next ride all the way to Valhalla and [Music] and ran out of ideas see you guys next time [Music]

Channel: Dev Ed

Views: 616,701

Keywords: svg, css3, css, css animations, svg animations, learn css, learn svg, build css animations, build svg animations, figma, css tutorial, svg tutorial, developedbyed, dev ed, web development

Id: gWai7fYp9PY

Length: 18min 31sec (1111 seconds)

Published: Sat Nov 23 2019