Try this Multi-Path SVG Scroll Animation Technique

Key Takeaways

what's up everybody Gary Simon here and today I'm going to show you how to do this it's a really cool effect where when you scroll down it's an SVG animation that's applied on multiple paths so I'm going to show you all the way from basically setting up and designing the SVG element itself all the way to HTML CSS and of course vanilla JavaScript we're not using anything like any Library green socks not used for this this is all just good old-fashioned regular vanilla stuff here so make sure to subscribe if you haven't yet and let's get started [Music] if you enjoyed this video check out these icores.com where you can learn UI ux design and more with my custom interactive platform that makes learning this stuff fun and easy I've decided to Time Lapse this particular footage because it's fairly straightforward I'm an Adobe Illustrator here but you can use whatever Vector app that you like I'm literally just tracing over this photo with the pen tool and I end up creating four different paths now when you're done depending on the software you use you can just export it as an SVG element alright so here I am in Visual Studio code we have an index.html here and if I go ahead and paste that in we have a couple things that we need to consider so the first thing is this XML we don't need that I don't need this stuff right here we don't need ID the data name we don't need the xmls all that crap um we do see down here we have it's called a polyline uh and you know what real quickly I'm going to open up something that will allow me to zoom up while recording so there we go alright so we see down here we have this um this a path here two paths but we also have a polyline and so that's something that we want to convert to a path so one of those four lines was just using the polyline attribute exported from illustrator so fortunately there is this right here it's a SVG poly polygon slash polyline to path converter so if that ends up happening with you uh you're just going to go ahead and paste in these poly lines right here I'm going to replace this area right here and just hit convert and then we get paths from it so we can just go ahead and now at this point and just paste those in so now we're working all with polylines all right so at this point let's switch over before we do that let's right click open with live server real quickly all right and here it is ready to rock okay so um before we switch to HTML let's also get our CSS rather let's get our HTML out of the way and that's just going to be really simple I'm going to paste in three different sections right here as you can see um we have our sections H1 airplane they go so fast from vroom there we go sounds like a toddler made this okay so now let's go ahead and just get some quick uh rule sets out of the way um of our body is just going to be margin 0 height 100 viewport height our SVG is going to be position fixed and then the rest is up to you um I'm just choosing to to scale down the width a little bit I'm choosing also to position it with top and left just so it I get it in an ideal position uh given that it's going to be going to be fixed obviously despite Scroll after that we're going to go ahead and have our sections and our sections are simply going to be a height of 100 viewport height and this is just trying to give me some scroll in some different sections of content to demonstrate this so display grid oopsie we're gonna have Place content Center for single H1 element will be centered vertically horizontally font family BOS new a I think that's how you spell that I already have it installed and so I'm not going to bother importing it this isn't a real project of course you would want to do that if it were and then I'm just going to go ahead and do an end of type to select the middle section right here with a background of RGB this is just a blue color I think no it's a kind of like a beige color and that's it so if I revert back to our situation here there we go now if we really want to make this a situation that it starts to actually create the intended effect where it's starting to fill in these lines we must use JavaScript so let's switch over here and put our JavaScript hats on so we're going to do inline script here vanilla Js and first thing we're going to need to do is and let's make this larger let me make that big and beefy there we go so first thing we need to do is we need to gain access to all of our paths all right so we do that by using query selector all all right so let's get that right there let pass document query selector all and that gives us access to all all four of these and any other number of paths that we would want um next up we're going to go ahead and Define an actual function so we're going to say function and we're going to say fill SVG paths I think that's a good name and this will get called on scroll and also when the page loads all right so for our very first line of JavaScript we're going to figure out the percentage down that the scroll bar on the side has been scrolled Down based on the available height of the document itself so it's just a little bit of math right here in this section I do have a code pen you can take a look at that this is what that looks like essentially all right um now what we could do is I can show you this was to console log the scroll percentage and we are going to go ahead and first run this fill SVG path and then also on document add event listener unscroll we're going to call it every time it changes or we scroll down I oops what am I doing fill SVG pass all right so let's save that we're going to go back okay now if I I hit F12 you can see over here we have our values all the way from you know 0.0 at the very top to 0.99 down at the bottom all right so next up let's go ahead and get rid of that and we need to iterate over each one of these uh paths right here so for VAR VAR I I equals zero I left then pass DOT length past dot lengths will just in this case is going to return four and then we increment our I value very simple and now we're going to create a property let path equals paths index the current index so it gives us access to each one and all we have to do now is just reference path itself to change different properties all right now we're going to do let path length equals path dot get total length all right so what does this do this figure figures out the length of each one of these paths right here which is important to know so that we can adjust the correct CSS properties that will fill in the the line essentially so if I do console log path.length we will find oopsie will find the each of the four lengths all right so if I refresh I looks like oh yeah that's making it difficult let's um go through here okay I'm seeing I forgot I uh it's just iterating over one each one of these I might just refresh at the top uh it's it's outputting values that I'm not expecting I was expecting to have four here but oh I do but they're just repeating so it's like there's four values right here this is the length of each of the lines like this 1508 is like the real long one that I created like the overall shape all right so let's go ahead and continue on now at this point we're going to take our path.style stroke Dash array now this is CSS property that we're going to be updating and we're just going to equal that to the path length all right and we'll do the same thing with stroke Dash offset these two values CSS properties work hand in hand with each other um and you'll see how so for instance if I change this and hard code this to like five and five all right and we hit save and go back you can see we have kind of like a dash all the way around all right so if we make this Top Value the stroke Dash array to something really big like 1500 and we hit save it's going to be a big long Dash essentially and it's going to cover everything so hopefully that makes sense we're going to go back to path length now at this point we save it it's going to disappear there's nothing here now because we set up the length as such um to equal the path length right here so now um we only have two other lines so let draw length equals path length times scroll percentage all right so this is basically the length to offset the dashes and then we're going to say path.style dot stroke Dash offset equals path length minus the draw length all right so let's go back here and now we can see that it's filling in so up here we don't need any of this this uh style stuff right here and if I save it and I go back here I did add SVG path right here so you make sure you add that um because we're styling the each pass giving them these values right here so the color no fill stroke width you can choose to make this bigger or larger if you want based on your project needs um and that is essentially what makes it work now if you wanted to have a little bit of animation you can give it a transition property so we can specify right here transition stroke Dash offset maybe like one second entirely up to you with what you do and take a look at that so now and by the way I'm using my scroll wheel but you can also use this I just the same hopefully you can see that very very cool stuff if you use it intelligently it could definitely be a really cool thing that you can integrate into your projects all right everybody hopefully you enjoyed that now if you did make sure to subscribe check out designcores.com for my interactive courses both on UI ux and CSS and I will see you all very soon goodbye