GSAP 3.0 Crash Course - JavaScript Animation Library

today I'm going to show you in part two how to create this using G SAP 3.0 awesome stuff hey everybody what's up Gary Simon here so today is part two of the G SAP 3.0 video series and in the first video if you didn't watch it it's not a big deal because I was only working within Adobe experience designer or Dobby XD to design the the layout and also prototype the type of animations that we want roughly you don't have to watch it if you're just interested in Chief's app only but that's what this video tutorial is all about so G SAP for those of you who don't know is the green sock animation platform is a very powerful JavaScript animation library that allows you to do really sweet animations out that go beyond just your regular old CSS animations it gives you a lot of power so G SAP 3 there's a lot of new changes here if you go to this page you'll find them you know 50 plus new features it's roughly half the file size of the old one but has even more features so you can read all about this check out the the demos which are awesome and the CDN links and all that good stuff so once again just to show you what we're doing here we're creating this with G SAP and we're even I'm even showing you how to use timeline to very easily reverse and and reveal your animations which is very cool alright so if you haven't yet make sure to subscribe and let's get started before we begin though 'la note the sponsor of this video makes it easy to host your site your app or service on whatever technology stack you use with one-click apps like wordpress drupal getting up and running is easy with back-end access to your server customization options are all but limitless a fully configurable dns manager allows for you to easily switch or do name over to your new server and ssl certificates can be installed for free using open source tools so sign up using the link below to get $20 in credit on your new leno de count alright so here we are just a 1 I always want to mention I just recorded this entire tutorial was like 40 minutes long and then I realized the extent the power adapter wasn't plugged into my camera I didn't realize until after recording so I have to redo all this again I'm gonna speed it up a little bit more than what I have because I am pressed for time but I just want to show you an Adobe XD from part 1 of the tutorial the prototype that we created and this is kind of what we are going after but we're gonna make the animation even better with the help of G SAP alright so the part thing of speed up is the HTML and CSS and getting that stuff out of the way because that takes up actually the bulk of the tutorial the 40 minute tour that I had so I'm going to do is to show you you know very briefly describe the HTML this is all the HTML that we have from line 21 to 11 essentially we have 10 lines just to recreate what we had going in the XD prototype right here alright so I just to show you in the browser if I could find that there we go this is what it looks like in the browser one thing though I'm did not make this responsive just because you know I wanted less code I didn't want to sit here you know trying to describe a bunch of stuff that isn't pertinent to GS app so I'm assuming if you're interested in G SAP animations you probably know about HTML and CSS already just know that there's no sanim ation happening here right now and that's what we're going to be doing so to get started I we can go to I'm not sure I my toolbar will not work for some reason when I have this maximized very frustrating it usually never happens but I just wanted to show you G SAP 3 there's a good getting started page so it's right here it's gonna show you highlights it's gonna say you know exactly what has changed these are the key parts right here there's demos about what you can do and then also the CDN so the G SAP core is what we want we're gonna copy that URL we're gonna come down here just on top of our closing body tag script we want the source right here and just paste that in alright so after that we're gonna say script and go right there so we're going to start to very simple in terms of examples and then we're going to work our way up after that just so that you can kind of see how we can progressively enhance our app by using different features so what we want to do is let's say for instance we wanted just this element right here this div class content to just animate from opacity zero and then down I just move it down on the y-axis here's how we would do it with the new G SAP 3.0 so we'll say G SAP from and the great thing is is if you use G SAP in the past like the 2.0 versions then you would have to continue self with using tween light between max timeline light timeline max it was all kind of confusing but not everything is condensed into the seeing single G SAP that we can use so we can use the from or the two method and I'll show you what that means just it's hard to explain I'm just going to show you and the first argument is going to be the selector you know what is it that we want to animate well in our case is the content what's interesting is we only have one div element in this entire layout so we could actually put div instead so you can use you know the actual HTML elements themselves two selectors or classes so after that what properties do we want to animate within this object so we'll say a pasady is going to be 0 duration is 1 and we'll say Y negative 50 that's it let's go ahead and see what that looks like so we refresh and there you go it's going from a passage of 0 negative 50 pixels and coming down eye right here so it's saying it's going from those values what if we change this to basically it's going to hide its gonna reverse everything it's gonna go to a passage 0 and move up 50 pixels and set it down awesome awesome stuff so freaking easy now one thing I do want to mention if that's all the animation that you had on your site or just some really simple animations like that they're not complex sequence to animations you want to use G SAP you can just use regular CSS animations for that so next up let's show easing so what are easing is what we can do is we can add in another property called ease and we can specify a lot of different types of easing so let me show you the documentation because they have a great example here so G SAP easing 'z let me go here and it's going to show you all the different easing so this affects how you're going from point A to point B so like elastic will make it bounce power one our two three four it kind of starts out fast and then goes real slow you can do a bunch of different things right here so just to show you a couple of those will have like power to ease in out save that and you'll notice the animation kind of comes in a little bit faster and then to really show you how interesting this is we can say elastic and will say 10.3 you can experiment with those values to see what they do look at that very very cool stuff I don't want elastic but I just wanted to show you that you can add in easing to your animations all right after that let's add in the animation for our little purple swirl graphic and also the building the right column alright so we can just add in another G sap from will target the selector of image which is the swirl graphic right here alright that's the selector and we'll say duration is 1 Y is 30 and opacity is 0 so notice they start at the same time and is just moving in opposite directions based on the values I gave them notice up here Y was negative 50 but here it's 30 so they're going in an opposite direction we can go ahead and shift alt down to replicate that line and change this to a side which is this selector right here the aside contains the building graphic in our SAS file so the SAS by that we can grab all this from the code pen that I linked this is right here alright so for a side we're gonna have to change things up just a bit so for duration we have one opacity of live zero and let's just do y thirty but we're gonna change that and I'll show you why so if i refresh this notice that there are scroll bars right here that's because this is this aside is the height is 100% and if we move it down it's going to create scroll bars really the way we had it before we had an animating from the left to the right it'll do the same thing if we do X and like a hundred notice we're getting scroll bars vertically and horizontally we don't want that so we can animate it we must the background position property instead of the exposition so background position and CSS looks like that but if you have values that have hyphens you want to put camelcase so position like this then we can specify 200 pixels and like zero pixels so we'll save that and there we go alright awesome awesome stuff now these are all animating at the same time and we can add delays to our properties so to our image property which is right here let's add a delay of like 1.4 and we'll add a delay of like 1.1 right here so that's 1.4 seconds and 1.1 seconds so let's refresh this so notice this comes in a little bit after this stuff did which is kind of how almost we planned it in our XD template alright now the one thing that we didn't do is I we didn't stagger these in in our XD template each one of these is coming in on its own independently so how will we do that well well grant we're going to restructure this just a bit and we're going to notice how we have a class of animal one on h1 element the paragraph and the button beneath it so this is important because it's going to allow us to create a stagger animation so we're gonna change this top right here because this is what currently is animating them right now from the development we're going to change that to Anam and the only thing we're gonna change is we're gonna add a stagger property and this is a numeric value so zero point six seconds so let's save that and now look how they automatically animate in sequentially and they stagger animate and that's all it takes it will do that to every CSS element or HTML element that has that class applied to Anam one very very very cool stuff so they'll animate faster in if this is a lower value or they'll animating it more slowly if this is a higher value awesome stuff so now I the last thing I wanted to show you before we get to the timeline portion is the texts reveal animation because if you recall we go back to our document we hit play we have a blinder effect or a text reveal a vertical text to reveal effect applying here or happening so how would we do that well if you know anything about CSS text reveal animations I've done a video in the past you can use the say after selector on the element in order to make that work so we could see here for h1 element we have a span element wrapping around each of the three lines of our text the CSS over here for that looks like this there's just a display block on that span element and that's it but right now we have to create span after and we have to give a few more properties here so first what content is empty position is absolute left will be 0 width will be 100% height as well and also Z index will be 1 so it sits on top of the text and transform origin will be 100% 0 you can play around with these values they determine kind of how the text will be animated like if it reveals it from the top to bottom or right to left left to right etc so we'll save this and now what's gonna happen we're gonna we're not going to actually we are going to see it let's see here oh yes in order for us to see it we have to make the background white there we go so now we're gonna see that part the white overlay but we're not going to see the text because we haven't revealed it yet so unfortunately in order to animate I the after or before selectors I'm an element we can't just put something like span you know after that won't work so instead what we have to do is we have to use a CSS plug-in or a plug-in here specifically and it's called if I go back here the CSS rule plug-in so if I'm going to copy that we're going to that URL put in script source reference that CSS rule plug-in and now what we have to do is create a reference to that selector with that new plug-in so we're gonna save our rule equals CSS rule oops don't put that in parenthesis CSS rule plug-in and then we're going to say get rule and then span after so then what we'll put in is G snap we'll say - this time we're gonna reference our role for the selector and then we wrap everything in the object like useful usual but we put in CSS rule as an object and then we put in what we want to animate so scale y 0 so that's going to take it on the the y axis vertical access and we're gonna scale it 0 based on the transform origin so then after that we can put in all the user usual stuff duration 1 and that's about it right there so now let's give this a shot and notice how it comes in and animates awesome awesome awesome stuff now what also what about if we wanted to oh we already did add the delay never mind that so now okay this all works and it looks exactly how we want it to what if though for instance we wanted to make the duration of this element maybe a little bit longer what would that mean that would mean basically in the current setup that we have we would have to adjust the other delays to account for that because it's gonna throw everything off when you're using what's called the G snap timeline however you don't have to worry about that it's much easier to make adjustments to your specific animations in the sequence without having to worry about screwing up everything else so I'm gonna show you how to do this the timeline way so we're going to wrong way Gary comet this stuff out alright and we're gonna do it the timeline way alright so for the timeline way we have to create an instance of the timeline so we're gonna save our TL for time line equals G stop time line and in here any default properties that all of the the animations that you're going to create from this instance of the timeline would share so if any of them save share the same property like maybe the same duration you can specify it here in a defaults property right here like duration one if they all have a pasady zero you can put a pasady zero in the next comma alright so now what we can do is we could say TL dot from and we can start recreating the animations up here but it's not straight it's not as straightforward as just taking an in this order when you have AI when you're creating animations without the timeline the order of these values don't really matter because you're dealing with them in terms of durations and delays to try to you know create the animation for here when your dues in that timeline the order of the animations is very important because once one animations done like your first animation the next one will start automatically which is not the case up here so you'll kind of see what I mean as we go on so from I is going to be our annum one just like it is at the top it's kind of like it's like the first thing that happens we revealed that that headline so we're going to put in um one and then inside of here it's gonna be the same stuff like negative 54 y I we're gonna stagger it at a point six seconds value we're gonna put a pasady zero all right so let's save it we'll go back and there we go it's not showing this stuff because we didn't reveal that animation yet in the timeline way next up we're going to say to and we're going to put our rule here this is going to be the part where we actually reveal that the blinder effect on the text animation 1.8 and then our CSS rule object here will be scale Y like it was zero and then let me hit play or save just so we can play it just to show you what happens notice how long it took and that's because it's waiting for this animation to complete before it starts but if you do want to offset this so that it kind of starts around the same time or maybe just after you could put it another parameter or not a parameter but a comma here and you can put in quotes if you want it to start earlier you put negative equal or minus equals we'll say like a two point two two point two seconds there we go now comes in much better alright so now let's go ahead and continue on you by the way we can chain these as long as you don't put a semicolon at the end here so you don't have to keep on saying TTL or TL dot and then we're gonna say from aside back around position let me just copy this part at least and this alright and the opacity is zero and we're gonna also have a delay here a negative delay offset I shouldn't say delay it's an offset negative offset of 1.5 there we go and then finally the swirl graphic let's just copy that duplicate it rather this will be image will say why is 30 and actually 50 because that's what we were using before the opacity zero and I think we'll just do a half a second delay for this or offset rather there we go how awesome is that now we can I adjust any of these values without having to worry about adjusting any of the other properties of the other sequences so that's one benefit of using the timeline is the fact that we don't have to you know change one value and then have to change everything else another awesome advantage is the fact that it's a time line so it's literally like a time line that you can scrub through the animation for instance what if we wanted to reverse this animation doing it this way we'd have to like recreate these and just by manually and then have you know four more lines where it reverses itself that would be ridiculous very verbose instead we can do this so let's make this clickable this right here so this is the call to action button called start dreaming has an ID of CTA so that's how we're gonna reference it in JavaScript and I'll say document that hands in the wrong position document dot I get element by ID CTA add an event listener for a click and then once something's clicked this is all whatever is in here will execute so what we'll do is we'll use a JavaScript ternary operator which is to space look like a toggle so we'll say TL dot reversed and look up the time line I the API just to see what methods you do have available we have reversed so if this is this will result in true or false if it was reversed so if it was reversed then we want to call TL play if not which is what the colon is for then we're gonna reverse it alright so let's save that and it should work so it's going to come in we're gonna click it and now it's going to automatically reverse through that time line through these steps how awesome is that so now I know you can't see it right now but we can click it if it's somewhere where the hell is it there it is now of course you wouldn't want to you know make this sort of thing live or whatever use it live but this is just show you that it does work look how awesome that is alright everyone I hope you enjoyed that a lot if you have any questions be sure to comment if you like this comment tell me what you liked what you didn't like I don't care but most importantly make sure to subscribe because at 500,000 subscribers I'm releasing a guitar play through video set in the early 1980s it's gonna be a music video I'm just about done with it very fun stuff so yeah get on that I'll see you guys soon goodbye

Channel: DesignCourse

Views: 116,436

Keywords: gsap, gsap 3, gsap 3.0, gsap tutorial, gsap 3 tutorial, gsap 3 2020, gsap 2020, greensock, greensock tutorial, greensock 3 tutorial, greensock animation platform, javascript animation, javascript animation library, javascript animation tutorial, gary simon, designcourse, coursetro

Id: YqOhQWbouCE

Length: 23min 1sec (1381 seconds)

Published: Thu Nov 14 2019