Animating SVG with the Awesome GSAP 3.0

hey everybody what's up gary simon here so today we're going to be stepping into the world of front of development with the aid of gsap which is the green stock animation platform in order to animate the ui design that i did two days ago i did a tutorial i'll try to remember to link it below so consider this kind of like part two first part was ui ux design in adobe xd second part is making it a reality in the browser and this is based on the relaunch of designcourse.com so it's a personal project very important to me and so let me show you exactly what that looks like so it's this project right here if i refresh we're going to see we have a nice animation over here and then we animate the element that uh the card the the skeleton ui card that i created over here so as always if you enjoy this make sure to subscribe and let's get started now before we begin some of you may not know but early in the year i released a ui design bootcamp on scrimba now scrimba.com is one of the hottest new ways to learn coding as well as design at scrumba you don't just watch videos no no you're actually able to modify code in the browser while you learn my course on ui design features over 100 lessons that are specifically tailored to help you become an awesome ui designer and they're packed with interactive challenges so visit the very first line in the description this youtube video to access my course along with many others for a very low monthly fee alright so here is the design that we created uh in the video from two days ago um in that video you know again it's just about ui ux you know just creating this from scratch so in order to get this uh these this illustration here exported so that we can use it via svg and in you know the front end development process we have to uh make sure everything is grouped up so if you recall we had like individual groups here here and this is its own group but then i took all of those and we made them groups as well so all of them are part of one group called illus for illustration all right so that's what we're going to export so we can right click it go ahead and export selected svg blah blah and the resulting file that you get is right down here and i'm going to drag this over very quickly in this file or the code rather looks exactly like let me put a container in here i did it again i keep on forgetting that emmett is not css container there we go um let me make this a little bit larger and the uh css i mean this svg there's a lot of svg here so i'm gonna paste that all in this is all of that now normally i would go through and i would remove a bunch of stuff i know an svg attributes we don't need any of this stuff like the width the height and all those other ones we just need the view box here um but yeah i would also go through remove all the id's there's actually handy i think it's called omg svg it'll remove a lot of stuff for you automatically i'm not going to bother with that but this is all of it right here um oh it looks like there's a unclosed div or group tag right there well we'll see what this ends up looking like anyhow but just to show you what's happening you know this is almost a blank html document as you can see it's referencing a css main.css file i'm just using sas here and so let's go ahead and also right click and open with live server just to see what's happening yeah and there it is let's use the background color in our xd document as well um so we're going to take the artboard get that all right and then we're going to go ahead and do a body and background is going to be that color color let's set that to white as well and font family i don't know i've been really liking nunito lately so i'm going to be using that yet again oh there's a little logo here that needs to be removed um if you ever want to find out okay what svg or what is the html element of that just click on it i actually i think when i hovered over it showed me it's called path underscore one let's do that path one there we go so we save that all right so now that's looking pretty good there all right so what we want to do is whenever i'm doing responsive we're going to make this responsive of course responsive front-end development we want to start with our mobile first all right so something small like this so that means i'm going to just situate this right here and get this over here and then we can also hit ctrl i b to get rid of that sidebar here visual studio code all right so this right here you have to ask yourself when you're doing uh front-end development and this goes in hand-in-hand with ui ui design as well if you don't have like a mobile ui design prototype that like the designer gave to you you may have to you know adjust these things accordingly i would like to see this much bigger right rather than see everything all the way so we're going to need to make adjustments for that specifically so what we're going to do is we're going to take the svg element itself and we're going to say position absolute we're also going to do a z index of 0 because there's going to be stuff on top of it like the type right so then we're going to have left is going to be like negative 55 percent oh come on gary find the percentage there you are and then top is going to be negative 8 and then we're going to do a width of 150 percent all right so now you can see the the the the thing that's our focal point is now in the center like that that's what we want here at least for like a tablet and a mobile viewport and we'll change things up to look more like the desktop here once we get to that step but for now we're doing uh mobile first all right so then what we're gonna do is i let's get the rest of our html up uh we're going to have a another html element a container for our content so we're going to call that let's see here it's going to be content inside of content we're going to have an h1 and we're also going to give that a class of main main content and then inside of there i'm just going to copy exactly what we have in the prototype this time i'm just going to put the quotes embedded i'm not going to mess with the special little design quotes that we had you could probably use the css um pre or before uh pseudoselector for that if you wanted to but i'm not gonna mess with that um we're also gonna have a container that holds both uh the avatar and trad braver c right there and we'll do like flex or something for that so that's gonna be quote container um also we're gonna name this main content as well the reason i'm giving these the classes of main content is because once we get to gsap i i'm going to do a sequence animation so the sequence animation works by taking any of the classes that have that element the class name or whatever you'll see what i mean in a second all right and then we're going to have a class of avatar outside of that we're going to have a paragraph of trad braver z and then i outside of that we're going to have our a class of cta and also this will be main content as well and again if you're confused about this main content just hold tight watch the whole video and subscribe if you haven't yet i figured i'd just throw that in all right so that's all the html we need for uh the whole thing basically right here i'm not going to do the or learn more you know it's excessive this isn't like i'm not actually going to use this um this is just for for learning purposes oh by the way i did kind of do do some more design here i haven't done this part yet but yeah and yeah i'll show that stuff later all right so uh now we have this stuff right here and it's not looking good not looking good so it's up to us as the front end developer to make this look decent if you of course you don't have you know a prototype for the mobile uh for mobile the mobile look all right so what we're going to do here is we're going to switch over to our uh our css and we're going to reference that content so width is going to be i'm just going to do like 75 and i'm going to do the old school method of centering things margin 0 auto and then text align is going to be center and then margin top i'm going to put fluid i we're going to use 75 percent for this and then position relative and z index of one to get it on top because uh this stuff was kind of on top of it slightly so now there we go now this is just a little bit ridiculous at this viewport but this right here is looking pretty good just looking at the size of this in relation to that content um next up uh let's also change up our h1 so we're gonna put our h1 here we're gonna say font weight it's gonna be normal all right actually i don't think the font way was even bad maybe i should have left it bold whatever not a big deal font size 1.4 am units all right um and then also yeah that's looking pretty good we're going to have a quote container down here and that's going to be display flex width is going to be 100 place content center and then you're going to see the avatar width is going to be 25 pixels height 25 pixels and then also background is going to be gray and then border radius 50 percent all right and then after that we're gonna take our paragraph because they look terrible right now margins like point three m point five and em on the left and right and then font size will be like point a m maybe wait maybe point nine all right and then finally our call to action i'm just going to paste this one in because there's a lot of properties you can pause this if you wish i also have a code pen in here at the bottom and that's it so nothing too exciting but how about we start actually getting to the fun part which is making this thing animate and then we'll deal with the responsive stuff after so what we'll do is first we're going to get a gsap imported you can type in google gsap cdn and the first result will allow you to copy this script tag right here we're going to put this right before the closing div tag and then also script we're going to have our javascript right there so we're going to have multiple timelines here let's see the first one that we're going to have is going to be i'm going to i'm just going to copy this well maybe i won't copy it i'm going to create a variable of timeline and this is going to be gsap.timeline and we can set defaults in the timeline and so these defaults are in an object called uh well they're in object called defaults sorry i can't talk duration is going to be like 0.7 seconds so that means every step that's a part of this timeline is going to be 0.7 seconds by default um we're going to do our own custom easing one called back ease out dot config two opacity is going to be zero so everything is going to be set to these three defaults of duration ease and opacity if you're curious about like where i got this easing for gsat gsap easings and we can just click on that first result and it's going to show you kind of how these easings uh affect the flow of the animation all right so you can see back right there kind of goes up and then down kind of a cool effect um and then after that let's let's get our timeline so we can do from all right and then we're going to do a class that doesn't yet exist called card bg all right and then we're going to create that in a second but we're going to do a delay of 1 a scale of 0.2 a transform origin of center and that you have to do that usually a lot of times if you're doing rotations or scales because it'll like it'll come in from a corner or it'll just look weird but if you want it to scale from the center of the element of the path you do transform origin center and by the way these are all normal css properties but when you're doing it in javascript you have to do this camel case so normally this looks like transform origin but we have to do transform origin all right um so then after that we're going to do one final optional element and that is to offset this to make it come in quicker you can put a negative equals and then like a 0.2 two seconds or if you want to come in after a little bit based on this duration amount right here you just put equal and then 0.2 seconds all right so we say that we can see nothing's happening and that's because we haven't created this guard bg i was a little bit confused for a second so we need to take the card background and we have to find where the card background layer actually is so to do that we're going to control shift i we're going to get this right here it's rectangle one one three nine so we can do a ctrl f one one three nine and then we can give it a class of card bg so like you see there it goes now of course everything else stays there and notice how it comes up a little bit that's the easing of back it comes out and then comes back down and it's a delayed a little bit and you'll see why the delay is there it kind of works in with the rest of the timelines and kind of working backwards all right but basically what you need to do is you have to create more of these from instances for each of the element that you want to animate that's a part of this this whole card here all right so um the next one that we're going to create is going to be called card top all right card top now for card top well before we we find it let's go ahead and put in uh the properties for this one specifically so we're going to do this time uh a scale y because i kind of want this card top right here to kind of come down all right so scale y and it's going to be 0 and then transform origin is going to be top not center this time but the top of the element and then we don't need any time offset there so now watch uh what happens nothing because we need to do this card top so let's find this yeah i think it's path 40. all right so path 40. it's right after the other one class equals card top there we go isn't that nice that is just so nice let's make it bigger so you can see it easier there we go all right so let's continue on all right next up again we're going to do this for each one of those elements um and don't worry it's it's not gonna take that much longer we're gonna have the icon there's a photograph right here the little icon photograph that you know by default is visible so we don't want that so let's adjust that so icon that is going to be um scale it's going to be 0.2 and then i'll just copy transform origin center and then we're going to do an offset here this time it's going to be negative equals 0.7 so it's going to come in as soon as the other one comes in let's get that um i think that is named something like icon finder because that's there we go so this is going to be class icon there we go so now let's watch this very nice i like that so with those offsets either using the negative equal or just equal alone you can add and remove time and control exactly in the sequence animation you can kind of create sequence animations by by hand i'll show you also how to create sequence animations i a little bit later on now we're just going to do each one of these little i'm going to call them blips like these little skeleton placeholders for ui uh elements uh there's one two three four five of them so what i'm going to do is replicate that shift alt in the down arrow key for those of you are wondering how i was doing that that's going to be blip 1. blip 1. they're all going to be the same so it can be scale let's see here scale is just going to be scale x on 0. so they're going to come in from the side from zero and then just push out kind of like it's all just writing in real time and i'm going to shift all down so there's five of them two three four five so this one's not going to have an offset but the rest of them are two four uh like five and seven so these kind of come in a little bit quicker than the ones before it so now we just have to create a blip class for each of these and the first one is rectangle let's see here it's going to be rectangle and 1 1 4 1. you can see five of them right here we're just going to do a class of blip 1. and five four three two look at that isn't that exciting i like it all right so let's also after it's like i want to have some sort of movement afterwards maybe it'll float up and down a little bit so in order to do that we're going to create a new timeline and we're also going to create a class um or a group rather with a class of whole card all right so if i find yeah so our whole group of the card itself begins with this illustration because remember that's what we named the layer in xd it's going to be a group class hole card now we just have to find the end of the card and i believe that is going to be right here i could be wrong though what we can do is test that out let's look over here where's whole card yep so now our new group here in svg it's called whole card so now we can take the whole thing and start floating it up and down so to do that we're going to go ahead and call this timeline 2 and for timeline 2 our defaults are just going to be a duration of 1.5 and a delay let's see here sorry in a delay we're going to delay this whole thing for one second before it actually starts this for this particular time timeline so then we can say it's timeline 2.2 so we don't have to use from we can use two i and that's basically saying you know whatever the default stylings on this element are we're gonna go from that to to this element uh it works backwards opposite if you're using from so it's whatever the the properties that you set here it's going to go from that to whatever the defaults in the css and however it's styled if that makes sense so two is going to be um whole card and we're going to say y 10 repeat negative one so you could put repeat in there for any of these from or two you can repeat it for like a certain number of times like just two times or if you want an infinite it's negative one i don't know why but it's just negative one and then yo yo is true that means it'll go back and forth i between these two those two elements so let's see what this looks like notice how it's now slightly bobbling up and down between 10 pixels and it kind of just starts when stuff kind of comes in you can make it start you know whenever you want with these properties here and the delay and all that stuff finally i want this stuff to come in as well and in fact i want it to come in initially so i want this stuff to come in first and then maybe rate when this is kind of almost finished this will start animating as well all right so now um we'll go ahead and we're going to create another timeline we'll just call this timeline 3 or tl3 and the defaults for this one is just going to be duration of 1.5 and for timeline 3 we're going to say tl3 from main content remember that main content class i was applying on three different elements uh that's what this that's where this comes in handy so we're going to do opacity 0. it's going from 0 so we're not going to see it initially y is going to be 40 so on the y vertical axis it's going to come from 40 pixels and then stagger is going to be 0.3 you can use stagger to stagger animations any of them that have the class domain content there we go look at that all right so the last final thing to to worry about is just making this responsive all right so for that we're going to go ahead to our main.css or sas file rather and what you know as a fronted developer and again if you don't have a prototype that shows you exactly when and what to do you need to i ask yourself at what point you know should this layout start to change i'm going to say it's probably right around here because we'll have enough space to have this to the left and this element to the right so now we just create our media queries and uh the first one i'll create is around 840 and in there we're going to set the body to font size 12 no 22 pixels just to enlarge everything and overflow x is going to be hidden because i will have scroll bars unfortunately so now you can see if we go from this right to 840 all of our type increases automatically content is going to be text align left width will be eighty percent margin will be ten m units on the top auto and then zero on the bottom auto left and right all right so now we're getting somewhere but still this is all messed up don't worry h1 we're going to take uh width is 50 that way it's not overlapping as much but we're going to have to take this element and push it over there um we're going to take our svg all right so uh we're going to say left is unset because it was it was set before right is going to be negative 5 percent top is going to be negative 8 percent what am i doing i'm typing all these other random and then width is going to be 1200 pixels all right now of course things are still messed up like this whole horrible thing so let's get that fixed we have our quote container display flex place content is going to be unset there we go a little bit better and then our avatar with 25 pixels i think i already said it at that i don't know if i did or not um yeah i don't i don't it feels like i don't need to do this yeah one thing i needed to do is like this is not correct uh in fact i need to fix that because this is not in line with this i didn't do it in my original um project but all i need to do is really just take the margin on the top and bottom probably just a zero there we go now it's like perfectly in line so all i have to do is come here quote container what is that a paragraph element i think i don't know margin top we'll just do zero there we go all right so that's looking better um and notice how i made it i made certain you may be wondering like if you're new to this like how did i know to use negative 8 and negative 5 well i didn't i was just trial and error to see how those values were responding to the layout see like this is like a tablet and this would be perfectly fine but once we get to this element area we still have enough room we have enough room to where we can put this in a two-column layout essentially um after that there's probably one more because if you go out larger this is just too much spread out so i'm going to copy the last one because i think you get the point now save this and we'll show you what that one looks like yeah let me see here yeah so once we get to 1200 we increase the size of this and it just overall looks better we could probably make the h1 a little bit thicker a little bit larger as well but i'll leave that up to you guys and then obviously if we go out even further you'd still want to make some more adjustments or just take the container and make it like a a 1200 pixel container that's no more fluid but it'll just center everything and that would that way you don't have to keep on making media queries as it goes out so one last look yeah i like that so i think really you could probably do i would i'm going to use this in in the actual project because i really like it for on designcourse.com but i think i might do some more interesting animations uh with this but just just a general overview of how you would take this and animate these things with svg and gsap all right everybody hopefully you enjoyed that uh definitely check out designcourse.com here in the future and make sure to subscribe right now there's just a stupid ugly coming soon page but i'm going to be actually collecting emails real soon uh make sure to subscribe though to get the notification about when that's actually going to release uh and that should be later this year or early next year very excited about it anyhow i'm gonna shut up and i'll see you guys soon goodbye [Music] do [Music] you

Channel: DesignCourse

Views: 67,069

Keywords: gsap, gsap 3, gsap 3.0, gsap svg, gsap svg animation, landing page, frontend development, gsap stagger animation, gsap stagger, gary simon, designcourse

Id: lj37QZ047f8

Length: 30min 13sec (1813 seconds)

Published: Thu Sep 17 2020