SVG Animation With Text Tutorial | HTML CSS

hey how are you doing today okay I got something really exciting we're gonna learn how to do this today boom we have a super cool text animation with SVG and I are now limited to this you can do it with different kinds of shapes anything you can imagine you have to let your creativity flow but I'm gonna give you the tools in this video to help you able to do these kinds of effects so in this case we're gonna do with text but again you're now limited so if you find this video helpful make sure to drop it subscribe and let me help you get more creative alright the first step for this is we're gonna open up figma fragments a free app you can download it's really good and you can do a lot of things in this so don't think that you have to do it with After Effects or I don't know premiere not Premiere Pro that's for editing oh my god it was straight sorry okay you can just use figma and yes since it's free I want this to be accessible for everyone so make sure to get figma also alternative to that if you don't want to use figma you can use Adobe XD so here we're just gonna go up to this frame tab here we're gonna click it and we're gonna go to desktop so we're gonna this is basically gonna create us a desktop frame here so here what we're gonna do is I want to make that text white so I'm just gonna select this rectangle tool here and I'm just gonna draw a shape here now I'm not using my mouse so this trackpad you cannot imagine how horrible this trackpad is but please trust me if my cursor is going crazy then it's my trackpad so anyways the fill here I'm just gonna pick a darker darker color so we can see the text okay that's that's the only thing I'm doing here yeah I would not recommend my trackpad alright so up here we're gonna go to text and we are just gonna drag here like this and we can write here so we're gonna say I believe I wrote designer so let's write this designer here now it's super small so I'm gonna hit ctrl alt so I can select everything here and down here we can change the size of this so let's go 144 and now the fill is black and the reason we are not being not able to see this one is because this rectangle is out here so we need to drag it and this desk top frame down below the designer tank just like that as you can see actually above my mistake wait alright what's going on here there we go so it needs to go the designer is obviously on top and then we have the rectangle below just so this shows up good so we can basically moving this so if you're accidentally moving this rectangle you can lock it here so yeah you cannot move it anymore so now we can work specifically with this text so I'm gonna make it smaller like this and just Center it here okay just like that okay let's let's change the font here let me take I believe I use Poppins for this so click on Poppins there we go make sure this is centered just like that not we want this to go white so because for my I guess my final design which is not really a design because we just did the effect but we're just gonna change this to white like that good now we're gonna select this we're gonna hit right click on this and there is a outline stroke here now when we click this nothing is gonna appear to happen but what we can do is export our SVG and we're gonna have individual paths accessible so if you don't do this it's just gonna be one big SVG with a crap-ton of paths okay so if we do this and we remove the fill so here actually before we do that let's add a stroke so we're gonna hit the plus here on the stroke we're gonna change the stroke color to white let's do this let's do five pixels maybe here and we're gonna remove the fill here so we're left with this okay now to save this all we have to do is right click on this and go to copy as SVG and now if I paste this in here you're gonna see that we have the SVG with the individual paths so that's all we need in figma we can get started with our HTML and CSS alright let's get into the actual project so I just have an empty file here and then the HTML and empty CSS and an empty JavaScript file we're not gonna be needing JavaScript we're just gonna be needing it a bit to get some specific information which I'm gonna get into later so here all I'm gonna do is paste that SVG in here and then we're gonna yeah autosave is gonna mess everything up here but that's fine so we're just gonna paste this in here and we're gonna open up in live server to see what's going on now this is opened on another port so I'm just gonna quickly close this one because I had the other project saved here I was just messing around with it see how it looks the best so yeah it should work now so if I go live here it should open up our thing and we should have an empty file here because our SVG if you remember is white so we cannot really see it so all we have to do is go to our CSS here I'm gonna add some basic things to remove our padding here our margin and we're gonna say box-sizing border box okay there we go we're gonna select our body here and we're gonna say width 100 and height 100 VH which is the size of our monitor screen and now I'm just gonna add a background color to this so we're gonna write background color and here I believe I had a decent one we can take either the one off off our figma but I have one saved here so I'm just gonna paste this one in here alright let's see if our thing shows up now so there we go it shows up alright now let's go back a bit to our SVG here and right here where the SVG is I'm just going to add an IB to this and I'm going to a logo okay this will be our logo save we can go back here and I'm just gonna Center this so we're gonna say logo here and I'm gonna say position:absolute if you need help about positions I covered it yesterday so make sure to take a look at that video I'm gonna say top 50 and we're gonna say left 50 so we Center it now as you can see it's not centered because it's gonna move at 50 percent here so this is the middle but our text starts here right and we want it to be centered so what we can do is actually translate this back 50 percent so it's gonna be dead in the center so 50 percent left and 50 percent up okay so we're gonna do is we're gonna say transform translate we're gonna do - 50 percent on the specific element and - 50 percent that's gonna Center it perfectly look at that designer awesome good start alright so what we need to do is I'm gonna select all the specific letters in this HTML here in this SVG here so we have our SVG and we have path path path path path path okay a path for all the individual letters so the way we can select that is we can say logo and we can say path we can select a specific child here with ends child so one would be our first letter and child two would be our second so we have I believe we have eight D E as high G and E are eight okay hello spelling contest there we go one two three four five six seven eight okay now I'm doing this because I want to animate them one by one if you don't want to animate them one by one you don't need to do this so we have the first letter the second one three four five six seven and eight good awesome alright so I'm it's plane two things that we need here we're gonna need something called stroke ray and what this is gonna do if I add 30 pixels here it's basically going to leave spaces in our in our paths so it's gonna leave 30 pixels every 30 pixels in our path as you can see here so here's 30 pixels left here's 30 pixels 30 pixels sorry okay so if I change this to something smaller like 10 we're gonna see that we have a bunch of dots so it basically adds a space in our path so 10 pixel space but what we want to do here is actually we want to get the whole paths length and if we get the whole paths length and we're gonna add a dash array to that it's gonna look complete alright so if we go up here and we're gonna add more and more spaces then it starts to look like it's getting fuller and fuller and what were we gonna do is basically we're gonna animate that backwards so all we need to do here so this is the stroke - array another thing that we have access to is the stroke - offset which all it does it's gonna move the position of where the these empty pixels are okay so if I say 50 here it's just gonna move them around okay it's just gonna change the position of it it's not gonna change the amount of space because we have 200 but just gonna change the way it its position so these are the two settings we need however we kind of want to get the exact path for this the exact path length for this specific letter so that we need to kind of do a bit in JavaScript so let's get into our JavaScript here let me make sure I'm still recording because I used to have my my recording button on f12 so I used to open up chrome dev tools and it would stop recording now like what the hell is going on I've recorded this 20 times when I left up this garbage but my laptop wasn't garbage it wasn't I was garbage okay so here after this we can actually delete our j/s file here but what we can do is select our logo here and we're gonna say document query selector oh okay we're gonna select all we're gonna select the logo path so all the paths in our logo now if we console.log this we're gonna see logo okay and if we go back here we're gonna see that we have a node list of all the paths we have here so what we can do is actually we can loop through this so we can do I'm gonna delete this so for that we're gonna say for and we're gonna say let I okay we're gonna start off at 0 and logo dot length and we're gonna say I is less than logo dot length which is 8 okay so 0 is smaller than 8 which it is we're gonna say I plus plus so we're gonna increment this and here I'm just gonna cancel that log and I'm gonna do backticks I'm gonna use es6 syntax here I'm gonna do letter is letter i we're gonna say letter i so we know which one is and we're gonna concatenate again with this so we're gonna say dollar sign and brackets we're gonna say logo i dot length dot get total length this is gonna give us the total length of the dash of the stroke length okay so if we save this hopefully I wrote this correctly there we go okay so it's gonna see our first letter has 5 72 length or path length okay so there we go we have access to all of them right now so this is all the JavaScript we needed again we just did a loop and we loop through all of the elements are all of our paths and we just got the logo I okay so the end of it paths get total length okay this is the one you need if you're gonna use one shape all you have to do is just console.log the element dot get total length there you're gonna be able to get the the exact length so what we want to do is we need to get these specific ones and just insert them here so we're gonna say the first one is gonna have 572 now if I save this you're gonna see that our design is full again because the amount of space is equal to how big our actual how long our actual path is so it's gonna look full okay and now if we offset this by the same length it's gonna disappear and then when we start animating this it's gonna come and slowly like this as you can see so this is the property that we need to animate in 200 as you can see just like that so we're gonna say 572 and we're gonna repeat this process to all the elements I want you to take each individual elements here and just insert them like this to all of them so let me finish up and I'll get back to you all right there we go I inserted all the elements here now if there's a bit of that kind of thing there then make sure to add a dot and make sure you add the additional value here this is completely invisible I just added it basically like this all right so just so you can kind of have a bit of visibility of what's gonna go go on here so down here I want you to go all the way down here so below your things and here we're gonna say the add keyframes we're gonna say this line and then line and then okay line animation and all we have to do is say 2 and we're gonna say stroke - offset here okay so the position do you remember the position that that thing moves is we're gonna set it to 0 which is gonna give us the full full frame of the image of our SVG alright so up here are all we have to do is and I made this so if we say animation and we're gonna say line and them like this alright I'm going to show you two basically the basic and then we're gonna do it exactly how I did it at the start so here I wrote two seconds that's how we want the duration we're gonna say ease and forwards so if we save this and we take a look hopefully everything is fine so we're gonna refresh and there we go look at that cool nice and actually the D looks pretty cool that's not a sexual joke I promise so here all we have to do is copy this and just paste it and we can add a delay so here let's just add a delay of 0.3 seconds and then keep going and just add 300 milliseconds to this you can change it make it however you want I'm gonna do it with 300 milliseconds just to to be the same as we saw at the beginning of this tutorial so one point to one point if if you're bad at math like me here you're gonna struggle a bit so we're gonna do one point eight and the last one is gonna be two point one so down here to point one s let's see what we have refresh boom there we go alrighty for our last step all we need to do is add a a fill to this so what we can do is say keyframes we're gonna say fill okay and now here you might have some issues because if you want to say - all right we want to fill it to white all right because that's what we want to do to fill white okay and up here we can just do in our logo here we can just do animation fill of let's say we want it to last for 0.5 seconds ease forwards and we want to add a delay of 3 seconds here okay so if we save this it just appears suddenly okay and the reason why that happens let me make this 3.5 seconds here the reason why that happens because our fill is none we don't have any fill so when it changes the filter why it's like what am I doing with my life I don't know I'm just gonna add white and it's the cannot you cannot transition from fill none to white so all we have to do is specify here that we want it to go from so we're gonna say from and we're gonna say actually I don't I don't believe we need to yeah okay so we can do fill transparent here so we set our fill to transparent when we do that hopefully it's gonna work fine so there we go it works okay so we need to make sure that we set our filled transparent if you have no fills on it because then it can transition to the color white alright that's it for me today hopefully enjoy this tutorial as much as I did making it and drop a subscribe and let me help you make you as creative as you can be I'll see you tomorrow [Music]

Channel: developedbyed

Views: 523,217

Keywords: svg animation, svg animation tutorial, svg animation text, html tutorial, animation, vector, tutorial, scalable vector graphics, svg, SVG Animation With Text Tutorial, svg stroke animation, svg stroke dasharray, svg animation in illustrator, svg animation in html5, svg stroke to path, simple svg animation, what is svg in html5, create svg in illustrator, create svg in adobe illustrator

Id: vJNVramny9k

Length: 18min 53sec (1133 seconds)

Published: Wed Dec 05 2018