Complex SVG Animations Made Simple with JavaScript

with the pre-launch of my upcoming Advanced front end course I wanted to create a preloader animation with the logo while I may not end up using this I figured some of you would be interested in the process of how I created this which utilizes both SVG and a great talk animation platform to handle the sequence animations with that said let's get started if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy alright so here I am in a brand new project we just have some initial HTML right here we're linking to a CSS main.css and then in our CSS folder we have a main.sas file with just one rule set for the background color so I'm watching this SAS file to make sure it updates when I save and I'm also looking at this open with live server i port 5501 and at the state we have right now it's just this this beige color essentially so now let's switch over here to the illustrator file and that's what I use to design this and this is basically the advanced front ends logo and I have this structured uh in a particular way for animation purposes when I export it as SVG so the first is if you look over here in the actual layers we have three different layers so in illustrator I would just hit new layer and each separate thing that I want to animate and control with green sock I will just Place into its own layer now you don't have to use Adobe Illustrator if you don't have it I know it's a paid version but anything that's capable of exporting SVG you can use and it's probably going to be a similar you know uh structure here the reason I'm putting these in their own layers is because when you export as SVG within illustrator it will create groups with that name and those layer structures in the SVG itself I and so it's just going to help me easier be able to identify what I need to animate and so this like I said this is the logo and it's all outlined too so even though it's text I can't edit the text it has to be converted to outline in order for it to work with as we G properly so let's say for instance I had the type Advanced right here we can't see it because it's black on black and we scale this thing up you don't want it to be editable text before you edit it like that you want it to be there we go you want to be converted to outline so the um the keyboard shortcut is Ctrl shift o and that converts it into editable paths essentially so you can no longer edit the text but you can edit the paths and stuff like that so that's also required that's what these are as well all right so my idea behind this logo is uh Advanced front ends the the the animation idea that I had is initially it will just start uh like this and this element will come in with split text where we take each letter and fade it in in an interesting way and then same thing with this from the opposite direction and then it's going to kind of just push over and then we're going to introduce this Arrow element that will fall into place into the logo and then fade this stuff back out and then take this arrow and kind of do some interesting stuff with it you know and so the possibilities are essentially endless um and so when you're ready to export this you don't want to have a background like this uh so the actual size the artboard is the size of the tech the type in here and at this point when it's you know there's a transparent background all that good stuff it's just file save as and on your computer and then we choose down here SVG and then just export to SVG as a file it also gives you the option to copy the the text as well um for the code and so for me that code exported code looks like this so I'm just going to paste it right here in the HTML document uh there's a lot of stuff obviously there's a lot of code so there's a few things we can get rid of first so I'm going to get rid of these top two lines I'm going to get rid of the version here I'm going to get rid of the X elements stuff like that all right that looks good okay it does have some uh initials CSS here I'm not worried about but we can see the groups here so ideas advanced here's front ends and then here's the arrow so it makes it really easy just to set up and get rocking right away so if we save this we'll see at this point in time I we can't even see the logo that's because we need to go over to the main file here and we're just going to give it a the SVG itself a width of 20 viewport width and overflow is going to be visible if we don't do overflow visible the SVG container itself acts like a mask so like if I move that Arrow around and I wanted to push at the very bottom of the viewport then it's going to get hidden by those that the the defining boundaries of the SVG overflow visible helps prevent that all right so we can't see it because you know we're dealing with this background here so what I want to do first I is create an overlay element I and that's going to be the only other HTML we're going to deal with here and this overlay element I we're going to show initially it's so it's called div class reveal let's get this stuff I all properly tabbed up here okay and its purpose is to show initially it'll be position absolute and then we'll use I green stock animation platform to reveal it and do scale y Zero from a transform origin of top to reveal uh you know a user interface underneath of it or something like that so that's that's the idea at least so if we go back to our CSS and we can go ahead and just paste in this so this is the rule set reveal and it's position absolute height 100 viewport height width 100 tops and left zero Z index negative one background is going to be dark actually so if we save this we should see this right here this is exactly what we want right here okay so at that point at this point I there's another thing I wanted to do and this is real important and this is for helping you kind of deal with I the issue of fouc which is Flash of unwanted content so you can see we have a g element which is you know everything is encapsulated inside of a group here and what we want to do initially because the initial part of the animation should be zero there should be nothing here it should just be all the black uh background and then these these letters are going to fade in so what we do is we set visibility hidden this is the most important part right here visibility hidden because once we save that guess what we don't see it anymore all right so then now what we're going to do is use JavaScript and green stock in order to uh get that to reveal itself and so in in such a way so you'll see what I mean here in a second so the first thing we want to do is we're just going to use green sock itself so if you go to Google and you type gstap CDN gsap3 CDN the top result will give you this code right here all right so it's just a cloud Fair cloudflare CDN for green stock animation platform and then we'll use I not all capital uh just some inline JavaScript here and let's create an actual timeline because this is definitely a timeline based animation because it's very complex there's multiple steps so we're going to say const timeline equals gsap.timeline we're going to have some defaults here and an object so there's going to be ease power four out if you don't know what easings are just type in gstap eases in Google you'll find the top result in their documentation and there's an interactive editor that'll allow you to choose custom easing which affects how your animation plays out over time additionally we're also going to have a duration a default duration of 0.7 seconds so now all these defaults will apply to each individual tween that's a part of this timeline animation now before we actually get to the timeline animation part we have to set some things with the set method so we say gstap set and we're going to set our group which we just defined right here with visibility hidden we're going to Define it with auto Alpha One all right so Auto Alpha One will change both visibility and opacity and it'll increase that value uh to one so now if we go back here and we refresh we're going to see it again whereas if we just you know delete this we're not going to see it this will essentially bring it back I and this is to help deal with a flash of unwanted content I'll try to remember to show you exactly what that is and how this helps fix it I'm near the end of the video so outside of that we're also going to set a couple other things um right now we want the we don't want to see the arrow and we don't want it and we don't want front ends to be pushed over here with this little white space we want it to start right here because we want the arrow to come in and push front ends over to the right so we have to specify you have to get the selector for front ends specifically and I set the x position offset enough so that it's lined right on the same column as advanced where it starts so we'll say gstap set and I think they're using IDs here so it's going to be front ends I'm going to say x percent negative 10. now if we save this there we go now we still see the arrow so it's kind of screwed up and we're going to fix that now as well uh here in a second but for now I'm going to also use I gsap2 SVG so we're we're selecting the entire SVG and we're going to scale 1.2 for a duration of four seconds what that's going to do is it's going to take the entire SVG animation while we start animating other elements that are a part of it and just slowly grow it to 1.2 i instead of just one and so you'll see now when we fresh you'll see it grow for a period of four seconds you can see how it's kind of slowly just growing in all right so this is a simple tween that's not a part of a timeline which you can completely do all right so let's get started here we're going to say timeline from and we're going to say first our text so advanced and ST1 class that's the selector because if we go all the way up and we find Advanced here's the group here's the ID Advanced and then we look at the classes ST1 that each class of ST1 is applied to each individual letter it's important to understand that I because then you'll understand that we can do this following really cool thing so here's what it is we specify in the object in the properties proportion we're going to put y percent negative 200 and if I just save this and we look at what's happening you'll see it's just all coming down all right so what we want to do additionally is we want to stagger of .03 so it's a very quick stagger there we go so now it's looking a little bit more interesting you can see it kind of come down it's a lot more smooth than what the video is portraying it's buttery smooth on my computer the video frame rate is going to affect that now we could do some other really cool things to make it even more interesting like SKU y for instance of 60. all right let's see what that does all right so if I zoom up just so we can see it all right that's cool all right let's do a SKU X of 30 and a scale y of 0.9 and an opacity of zero so it's coming all from these values to the original values so let's try it again very cool so that's our first screen that's a part of the timeline I like to take these uh and chain them together so I'll tab them in and now we're going to do something very similar to the front ends text which kind of already almost has it GitHub copilot has it correct but Oma but not quite so I'm just going to repaste those values they're pretty similar we don't have a negative value here for y percent this is for the the uh the second text it says front ends at the bottom uh staggers point three scales 0.5 at this point in time um 60 and 30 same same values there and then opacity zero so it's almost all the same and if we save it you'll see it comes in like that let's try that again but I want to do an offset so it occurs quicker in while the top one is also being introduced so we do that by putting in the third parameter a negative 0.7 or so and you could experiment with these values and the timing of them on your own and now they're all coming in it's they're coming in quicker okay outside of that let's create yet another one and this time we're going to say two we're going to use a 2 method and this is just going to be our front ends text this is where we're going to push it over to the right so we're going to say x percent negative I found 107 to work well opacity will be zero oh sorry sorry sorry sorry sorry sorry sorry I was looking at the wrong reference code this x percent is going to be zero because we wanted to go in its default starting a point from where we import it essentially and then we also want to do an ease I'm going to do a custom ease of elastic so if I put elastic well let's just wait until uh let's just see what this does I and then I we're gonna put a positive offset of uh 1.3 seconds because we want that animation to kind of come in and then push over there you go so we see that again notice how it pushes over but I kind of wanted to have like an elastic feel so we'll say ease elastic dot out you could do out you could do in or you could do in out in camel case and you can just experiment with those and you could also experiment with the two parameters that are a part of this function right here I found that 1 and 0.5 work well now you'll see that how it kind of has this elastic animation like that and you can really exaggerate it by playing with these values right here after that we're going to have a from and this is going to be our Arrow so our arrow is in a selector called if I zoom up Arrow and ST1 and we're going to open that up as an X percent negative 107 I couldn't use 100 because I could still see the tip of the uh the arrow and then we're going to do an opacity of zero and again once again the same type of ease like that and then a negative offset of negative equals 0.7 let's save it and let's see now now we don't see that that Arrow by default because we're using a from which is setting the opacity to zero so you can't see it and also an X percent of negative uh 107. so if we refresh this look at that let's try it again wherever you probably couldn't see that because of me there we go very cool okay let's continue on after that point we can go ahead and we'll work on animating out the first piece of text which is Advanced for advanced front ends so we're going to use two methods so we'll use advanced dot ST1 and for this I'm just going to paste these properties in because I think you get the point uh and I kind of want this to move along a little bit faster this time we're going to give it a positive time offset so it's going to happen uh plus one second later than what it normally would essentially we're just doing a skew um we're doing an X where we kind of push everything off to the right a scale X of zero a stagger of 0.03 opacity zero duration of 0.2 so let's just see what that looks like see that how it kind of just swipes off the screen all right so let's um also do the front end text in a very similar manner so I'm just pasting this in here's front ends sd1 it's a two method SKU X and an x30 it's the same thing as the the values at the top essentially so if I zoom up okay now we can take this arrow and kind of push through at the same time which kind of makes it look like it's knocking out that text all right so for that it's another two and we're selecting our Arrow this time and so here's the the new code X percent is going to be 200 we're pushing over 200 opacity is going to be I'm not sure why I would put opacity one because we can already see it so let's just delete that and then this right here means to start at the same time as the previous value all right so that's real important to understand now look at that now that elastic easing is what makes it bounce just like that all right so that's cool now what we can do is we can turn that arrow and then make it shoot down and then pull up the page reveal animation so to do that we're going to have a few more steps here so we're taking this we're going to rotate on the z-axis negative 90. transform origin is Center when we add this you'll see after that last portion is going to push over the middle and then rotate there we go and then we're going to do another one on the same element X percent is going to be 1700 or Y percent rather so it's going to push it down to the bond near the bottom of the viewport and then we also have a negative offset here to kind of get this stuff happening quickly just like that that's that new portion now for me personally I would think that this is kind of like a loading graphic or intro animation is a little bit too lengthy so I'm probably going to change this up but I did want to show you how to do this and how easy it is to make complex animations here's another one where we then take the X percent or Y percent and put a negative value probably make this even larger and then we're using ease of back in again use that editor on their website duration 0.5 negative offset let's see what happens here so it should shoot up after being down here it goes down and then up just like that all right after that we have one more that's to take the reveal and do a scale y of zero so we do a two method we select the reveal div scale wise zero transform Origins top so that it goes from the bottom and reveals up the same direction as that Arrow kind of pulling it up duration 1.2 power 4 and out negative offset here is the final look so what's cool is you could have a full user interface that reveals right here and I that way you kind of if you have a a kind of like a Content heavy site with a lot of media and things that need to download this could happen like right after the loading graphic starts or something like that for me personally I would want this to be a little bit faster I would say three seconds Max for an animation I think this is more like four uh but now with these tools that you have you can really you can integrate these in a million different contexts not just a loading graphic you could do this in many different ways on a website all right so hopefully you enjoyed that if you did make sure to check out designcores.com forward slash AF for advanced front ends which we'll be releasing I as a pre-release and like approximately two weeks in the pre it's in Early Access One Week period where you'll be able to see exactly uh what I do to to to create Advanced front ends and you learn it from the bottom up and just to show you real quickly the actual uh course if I log in or off screen real quickly which I'm gonna do so hang on with me real tight let's uh there we go yeah so like green sock animation platform Basics these are all Project based too there's even code modules so like tasty hamburger it's like wow how do we create that well we have to start the challenge and it doesn't work it's up to you to fix it learning using what you learned throughout the course to work with the JavaScript over here and check out you know this this eye stuff and you can see all the different objectives I and so it's not just video this is a really elaborate custom system that we built for learning interactive Advanced front ends

Channel: DesignCourse

Views: 39,538

Keywords: svg, svg animation, svg animations, javascript svg, javascript animations, greensock, greensock tutorial, gsap tutorial, javascript tutorial, svg tutorial, gary simon, designcourse

Id: FVd5arHq0Zk

Length: 22min 3sec (1323 seconds)

Published: Fri Sep 01 2023