2.1 Quick Review

Hello and welcome back to Advanced Animation with GSAP plugins. In this lesson, I want to give you a quick review of the GreenSock platform. If you've never used GSAP before then I highly suggest that you go back and watch our introduction to a GSAP series. Because it has a lot of the foundational work that we're gonna be building off of. But in this lesson, I do want to jump in and do a quick review of how to set up one of these code pins to use GreenSock as well as what the basic syntax is for creating an animation. So first of all if you're going to download GSAP or upload it to your website or whatever, then you can get the files at greensock.com. So if we go to the main GreenSock web page and then go to Products > GSAP, or even on that home page I just noticed as we were navigating away from it that there was a download link down here. But you'll notice up here, there is a download link on the right. And we can click on that, and it will take us to a page where we can either link to it via CDN, which is what we're gonna do, since we're gonna be using CodePen. Or you can just download the zip file that has all of the files included. And note that that download file also has all of the plugins that we're gonna be talking about in this course. As long as you choose the robust option here then that download is gonna have all of the plugins that we cover. So again you can download that here or you can use the CDN link. Now CodePen is very handy because it already has the ability to insert GreenSock very, very easily. So if we were to come over here and create a new pen on CodePen, you'll notice if we click on Settings this is where we can add CSS files or JavaScript files. So if I jump over here to the JavaScript tag you'll notice that we can add external JavaScript, so we can link to other JavaScript libraries here including jQuery and things like that. And you'll notice down here that there is a Quick-add dropdown, and in that dropdown, you'll notice if we go to the very bottom there is an option for GreenSock TweenMax. Now if you use the GreenSock animation platform before then you know that TweenMax is kind of the catch all. It includes TweenMax, TweenLite, TimelineLite, TimelineMax, as well as all of the plugins. So we're gonna be using GreenSock TweenMax here. And again that's gonna give us most of the functionality we need. Again we will have to go in for some of these plugins and actually explicitly link to them there but not for all of them. So, we're gonna include TweenMax, might also want to include jQuery as well, because that just makes some JavaScript tasks a little bit easier. And then once we have those included we can just save and close and that will get us started with a pen. So this particular pen isn't one I'm gonna be hanging on to, so you don't have to worry about starting from wherever I'm starting. I just wanna show you very briefly to remind you what the basic syntax is for creating a GreenSock animation. So let's say that we have a div here with a class of square. And then our closing div tag. In our CSS we'll give it an appearance. So will point to the square class, and we'll give it a width and a height of maybe 100 pixels each. And then we'll give it a background color so that we can actually see it, we'll give it a background color in this case of black. So now we should be able to see a black square down here and we do. So let's see what it looks like to tween this or to create an animation of this object moving from one place to another. So if we go over to our JavaScript window here, we can make these a little bit smaller so we can see it better. Let's just create an animation of our object moving from left to right. So we can do this using TweenMax as we point to TweenMax with a capital T and a capital M. And then we're gonna do a two animations. We'll type .to and then (), inside the parentheses, this is where we put all the meat of our animation. The first thing we need is the item that we're going to animate. Well, we need to point to this square object here, so I'm gonna create a variable before we get to this TweenMax line. So I'm gonna create a variable called square and I'm gonna use jQuery syntax to point to it. So I'm gonna point to dollar sign and then inside parentheses and in quotation marks, I'm gonna use the CSS selector for that item which is .square. So that will allow us to point to that square and now we can animate it here inside the parentheses. So the first thing we need in the parentheses for this two animation is the name of the item we're animating which we stored in this variable called square. Then I'm gonna type comma space and the next thing we need is the duration of the animation. So let's say we want to take two seconds, I'll just type in the number two comma space. The next thing we need is an object which is gonna contain the details of the animation itself, and that object is contained in JavaScript inside curly brackets. So I'm gonna take this closing curly bracket and closing parenthesis and move it down a couple of lines, and then for the details of our animation we'll just put it in between these curly brackets. So what I want to do is I want to animate the x property of our object and I want to animate it to a value, and we need to put this value inside quotation marks of 500 pixels. And you'll notice right away that we can see that animation taking place. So that's the basic syntax, we can also add other things in here like easing, so we can say ease: and then we can insert a specific easing equation. So if we wanted it to bounce into place we could type Bounce with a capital B., and then the specifics of it which we're going to ease out of the animation which is really the only good way to do a bounce animation. So Bounce.easeout with a capital O, and that'll give you the animation you see here. And you can hit Cmd+Shift+5 or Ctrl+Shift+5 on a PC to refresh that animation and we can see it bounce into place. Another option we can use is elastic.easeout. And we can see that kind of bounces back and forth like a rubber band. So again those are the basics of using this TweenMax Syntax to create animations using the GreenSock animation platform. As we move forward we're gonna build on this as we start to use some of these GreenSock plugins that we've been talking about. So thank you for watching and we'll get started in the next lesson.