What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy JavaScript Animation with GSAP by Todd Shelton If you want to animate your JavaScript elements with ease, this course on GSAP is for you. You'll learn how to create a variety of animations, including tweens, timeline animations, dragging, CSS attributes, and more. Start CourseBookmarkAdd to Channel Table of contents Description Transcript Exercise files Discussion Recommended Course Introduction Introduction to the Course Welcome to this course on JavaScript Animation using the GreenSock Animation Platform, or GSAP for short. Animation's been around for a long time. When Flash was around, we used animation to tween objects around the stage. And even back when Flash was a big thing, GreenSock was even a big tweening platform back then. So if you were ever a big Flash developer, chances are you saw GreenSock someplace. What did we used to use before GreenSock came around? Well, some people will say CSS, but that didn't come around until recently in recent years actually. And some people used jQuery to animate their properties or animate their elements on the stage. Between both of those and GreenSock, the performance is a lot faster using the GSAP or the GreenSock's platform. It's a lot faster than CSS and jQuery. What else did you do? Sometimes you could create your own and animate your elements over time using adding the X values on to one another, moving at 5 pixels at a time. That's get real clunky and hard to manage. There are a lot of other libraries out there that you can look at, but GreenSock has a lot to offer, and I would definitely recommend looking at them. So what will you learn throughout this course? You will learn how to properly import GreenSock into your project. That's one of the most important things. Some people do not know how to bring in the right scripts and place them in the right order. You're going to learn how to do simple animations, how to get one element, one DOM element on the stage to move across to another area of the browser. You're going to learn complex timeline animations, how to string several simple animations into timeline animations to make them look really fantastic. You're also going to learn how to drag items around. That is one of the biggest things that people want to do, and it's even great on mobile devices. And last but not least, we're going to create a game using the GreenSock library and learn all the features that we've learned throughout the course and implement those into the game. So why don't we go ahead and get started. Simple Animation Setting up Our JavaScript File In this module, we're going to talk about simple animation using GreenSock Animation Platform. Now there're a couple of different things we have to do before we can get started, and one of those is creating our JavaScript file. Now what you want to use is totally up to you, but throughout this course I am going to be using jQuery for most of our JavaScript implementation. Now you can use pure JavaScript, and that's your preference. And I'm actually going to show you how to set that up in our JavaScript file right at the beginning. So let's jump over and create our JavaScript file. Now I want to note that this is not an HTML or CSS course. If you want more help using HTML or CSS, please browse the Pluralsight library. There're a lot of different courses on HTML and CSS like Practical HTML5 or even Basic HTML for Kids. So let's talk about how to get our JavaScript file started. So like I mentioned before, I'm going to be using jQuery. Now the first thing I want to do is come to my project here, and I need to create a new directory. And I'm just going to call this js for JavaScript. Now if you get into boilerplates or anything else like that, they're going to be named differently. It could be named app. I'm just going to call it js just to simplify our organization here. Now we need to get jQuery downloaded into our project, and how you get that is totally up to you. I like to actually download that into my project so I don't have to use a CDN. When I upload this to my server, I actually use a CDN then, but for local development, I actually download it. So here we go. Let's go to the browser. And, actually, I went to jQuery.com, and we're just going to come over and download jQuery. I'm actually going to use the compressed version, but you can use the uncompressed if you want. Now I'm going to right-click on this, and I'm going to do a Save link as. And I'm going to download this into my JavaScript file that I have here, or the folder. Now you can use different views in the Mac or whatever, but so we can see our project. And then I'm going to hit Save. Now once that downloads, go ahead and you can close this tab. And you can implement this however you want to. You can use Bower if you want to. You can actually use the CDN like I talked about before. But now we need to go over and bring this into our project. So let's go ahead and do that really quick. I put mine all the way down at the bottom. I know some developers that still put it up here at the top. I do not feel comfortable about doing that. So I'm going to put this down at the bottom. And we're just going to say js and implement jQuery here real quick. And now we need to create our own JavaScript file. Now you can call this whatever you would like. I'm going to call mine app.js. But you can call it script or JavaScript or whatever you want. But I'm just going to stick with app.js for the start. Now I am using code snippets, and you can check those out of how to do those in PhpStorm or WebStorm using live templates if you would like. So go check that out on the web. And that's how I'm doing those so quick. So now I'm going to type in js for the directory. And then I'm actually going to type the name of our file. For PhpStorm, I use Alt+Enter, and that actually lets me create this new file here real quick. Now we're not going to be using a lot of this CSS style sheet here, so I'm just going to move this over here so we can look at our JavaScript file. Now you must put our JavaScript file underneath jQuery so it knows all about jQuery's functions and variables. So the first thing I want to do is actually implement jQuery first. So we're going to use $(document), and we want to make sure the document is ready. Now if we start animating images and stuff like that right off the bat, we may want to use Window.load. But we'll talk about that later. So we'll just create a function here real quick and come down here and stop it. And I always like to set an alert or console.log, and I just like to put in Loading or Ready, whatever you want. And let's go over and test this in our project to see if it works. So all I'm doing here is just refreshing the page. And you should get an alert, something like this. If you do not, please check your spelling on a lot of these different names inside of here. Chances are that's probably what it is. Now if you would like to use pure JavaScript for $(document).ready, there is one way to do it, and I'm going to comment this out really quick. So what we need to do to get that implemented is we need to type in document, and there it is right there, and we need to do an addEventListener, and then we need to write what it is, and it's actually the "DOMContentLoaded". Make sure that's in double quotes or single quotes because it is supposed to be a string. And then we can actually run an anonymous function if you would like. And we're going to stop that. Now, we're going to hit alert, and I'm just going to put "Pure JS Ready". This will not work in IE8 or later. So just make sure you know that. So let's test this out and see if this works in our project. We hit it, and it says Pure JS Ready. Now this will work in all the new browsers. So fill free to use that if you want to. So now that's getting our JavaScript file up and ready. Now I'm going to delete this Pure JS document ready, and I'm going to uncomment my jQuery Ready. And this is where we're going to start off in the next section. So in the next section, we are going to implement it and get started doing some simple animation. Let's go! Ways to Import GSAP In this section, we're going to talk about where to find GreenSock and how to import it into your project. So the first thing we need to do is talk about where to find GreenSock or GSAP, which stands for Green Sock Animation Platform. Pretty much the only place you're going to be able to find it is at greensock.com. Now you can go to GitHub and find GreenSock or maybe where somebody's forked it, but the actual true raw source is actually from greensock.com, so you're going to have to go there to get it. The next thing we need to talk about is how to import GreenSock into your project. Now you're probably thinking, Well, I'm just going to import the JavaScript file. That's correct, you can do that. But here're a few ways to import your actual JavaScript files into your project. One is a CDN, which stands for content delivery network. I discussed this in the last section. But GreenSock does a great way of helping us bring those JavaScript libraries in and actually organizing them for us. The second way is to do it locally. And that means downloading the actual raw source code and then importing those files directly into your HTML pages, which we've done prior. But one thing that's nice about doing it locally is if you're going to be doing mobile projects or doing something like that, sometimes you don't want to worry about having a Wi-Fi and connect to CDNs, so that's when you actually put them locally in your project and move on. But doing mobile projects, that's a totally different scope of this project. So let's go ahead and take a look at how to get GreenSock and then the CDN links to do it. The first thing we want to do is go to greensock.com. And as you can see, we're here. It's a very nice website, very clean. And we're going to look and see where to download GreenSock. And that's actually right here with this big green button that they have nicely highlighted right here on the home page. If you click that, it's going to bring up this nice pop-up menu, and it's going to give us a couple of different options. One option is you can actually download the source code in a zipped file, unzip it and put it in your project. The next thing is actually to go to GitHub and download the source there, fork it, change some things if you want to, but this is their GitHub account. The next thing is the CDN link. So one thing I like about this especially if you're building websites, it's going to be hosting on a server, and you want to use these animations, one thing I like about this is that GreenSock's done a nice way, if you customize it, they have done a great job of actually layering these plugins and libraries so they put them in order of where they need to be in your project. A lot of times, people get confused about where to put, for instance, jQuery is first, and then our app.js is second. A lot of people get confused in that if they're new to web development, they'll put their app file first and then jQuery won't work. One thing nice about GreenSock here is that if you've picked different plugins, for instance, it's going to layer them in the correct manner so they all work with each other. So that'll help us out. But the first thing we want to do here is actually just pick the easiest one, which we'll talk about all of this later. TweenLite is the lightest file size. As you can see, it's only 9 KB. TweenMax is very robust, and it's going to get you almost everything that you need to do a lot of the tweens, but it's also 34 KB, which is small, but it takes a lot of things off of TweenLite. But we're going to stick with TweenLite right now. We don't need the EasePack. That's a lot of the easing that happens. And you may not need the CSS plugin. I'm going to go ahead and grab both right now so we can get our project moving. So go ahead and let's highlight those. Make sure that the CSS plugin is checked. The TweenLite is checked as well. So make sure you highlight both of those. And let's take them over into our project. So now here we are in our project where we last left off. We have our app.js and the $(document).ready. And we're actually going to place those below the jQuery here. So I'm going to go ahead and put both of those. Now I'm going to open this up so it's not so broken up so you can see what it looks like. So as you can see, we have our jQuery JavaScript file here. Then we brought in both the TweenLite and the CSS plugin for TweenLite. So you need to have both of these to be able to animate your CSS properties. And then we have our app.js. So make sure your app.js or whatever you called your own JavaScript file, make sure that's the last one out of all these imports. So that's the way to import these JavaScript files into your project. Now, again, I'm bringing this in through a CDN. You could also bring those in locally like we did our jQuery file. However you want to do it is fine. I just wanted to show you that there was a special way to bring these in. And if you go to GreenSock's website, they will help you layer those JavaScript files in the correct order. In the next section, we are actually going to start animating our website. Let's go take a look at that. Syntax and the First Animation Now that we have imported our GreenSock library, and you see that down here in the bottom in the last section, and we brought in TweenLite, and we also brought in our CSS plugin, we are now ready to do a very basic tween and learn the syntax for that tween. So let's get started with this. So we need to add this tween to our $(document).ready. Now this is JavaScript so we're going to write this in our JavaScript file using the TweenLite syntax. So how do you do that? We're going to start over here in our $(document).ready. Now I personally don't like to write all of my code in $(document).ready, so I'm actually just going to create a function called startTween, and then I'm going to jump down here and define the function. So now we have this function started here, and we need to learn the syntax of how we are actually going to write our first tween. Now, again, I imported this TweenLite library. You can bring in the TweenMax if you would like. I just wanted to show you that there is something different. Now we're going to start off by calling it by name. So we're going to say TweenLite. Now there're a few different functions inside of there that you could call. The one we're going to talk about in this section and probably for the most part throughout this whole course is the 'to,' which is just exactly what it sounds like. So we are going to use, say, basically TweenLite.to. So we're going to move the element or the object to a certain location. So let's go ahead and finish this out a little bit. So I'd like to go ahead and put my parentheses in there. Now what object or what element are we going to move? The first thing that I want to move is this toolbox that we had here in the HTML. In order to move that, we have to give that a very unique name. Just like anytime you access an element in HTML from jQuery, you need to give it a unique Id or a class. For instance, I'm going to give it an Id. So I'm in the toolbox, and I'm going to give this an Id. And I'm just going to call this toolBox. Now notice this is spelled totally different than anything else. Now because we have jQuery imported down here at the bottom before our TweenLite, we can actually come over here in our TweenLite syntax here or the way we're writing it and write jQuery's way to call the selector or call the element. So I'm going to do this. It's a hashtag, and we're actually going to call it toolBox. So now that's how jQuery calls this Id over here, which is toolBox. The next value that TweenLite takes is the duration. So how long do we want it to animate? We want this to animate for about 2 seconds. Now unlike all the other JavaScript in milliseconds, GreenSock's done a nice job of going ahead and just taking that and rounding that down or rounding it over to just pure seconds. So if you want it a half second, it's 0.5. If you want it a full second, it's just 1. It's not 1,000. So don't put 1,000 in there, it would take a long time for your toolbox to animate. So remember that those are real seconds. Then I'm going to start passing some other arguments in. So I'm going to put a comma, and let's pass in some key value pairs. Here we go. So I want to move the x. So all you have to do is write x, and then where do you want to move it? How far? I want to move this roughly about 50 px. This toolbox is going to move 50 px. So let me go over and describe what we're doing. We're saying TweenLite, move the toolbox to the x value, which is horizontal. You're going to move it 50 px in the horizontal axis or in the x axis, and you're going to take 2 seconds to do that. Let's go over and see actually what this looks like. So make sure you save this file. Jump over to your web browser. So once we refresh this page, our $(document).ready is going to get called, we're going to start the tween, go down there, run the TweenLite command, and see what happens. And this is what we should see. You should see your toolbox move over 50 px. Now what's really nice about that is we didn't even have to put the px behind it. It actually just takes that number and knows that we want to move it 50 px. Let's jump back over to our code and see if we can get the toolbox to move right in here to this center section or get close to it. So I'm going to jump back over the code, and we're going to move that toolbox, we're going to go x maybe 200. Now we can also add the y in there. And we maybe want to go down 225. Maybe 2 seconds was too long for you. Let's move that down to 1 second, and now let's see what happens. Save it, jump over to your browser. Now let's refresh this. Now you're actually going to see this kind of glitch real quick. Not glitch, but you're going to see the toolbox move back in location and then move again. So let's refresh our page. And now you're going to see that the toolbox actually moved down there into that open area. Now we probably want to move it to the right a little more, and that's basically on the x axis. So let's jump over and fix that real quick. So let's actually change this and try to move that in there. So let's actually change that to 290 maybe. Go back over, and refresh the page. And it's going to put it right about right in the middle where we want it. So that's basically a very quick, easy way to animate an element on your page. GreenSock does a great job of making this really easy to write. One line of code, we got the selector for the element or the object we want to animate, told it how long we want it to animate for, and actually moved the x and y all in one line of code. Very easy and very efficient. So in the next section, we're going to expand on this animation and add some more properties and values to it to do even more with our objects. Let's go get started. Adding More to Your Animation In this section, we're going to expand on the animation of the tween that we did in the last section. Now in the last section, all we did was basically learn the syntax of the first tween that you've written and how to write it in TweenLite. And we moved the x and y positions. So if we go back over to our web page, you'll notice that the toolbox was in the center of the page. So let's add some more properties and change some things. So, I'm going to jump back over to the code. And we can add new properties just simply like we did the x and y just by putting a comma. And in this one, let's saw that we want to add a rotation. And in that rotation, we only want to turn it 90 degrees and maybe we want to change the alpha and take that down to 0.2. So you'll still be able to see the toolbox. It's going to rotate 90 degrees, and the x and the y will move. All of these properties will get changed at the same time, and they will all be done in 1 second. Let's go take a look at it. So here we are. I'm going to refresh the page, and notice that it went down to this position, it turned right, which is 90 degrees, and then the alpha went out to about 0.2. Now it looks like it got dimmer but actually since the alpha went out, it's showing the black background through it, so it didn't get darker, it just has less opacity so it works a little better. So let's go back and take a look at some other properties and explain the rotation. So even though we have rotation here, there is a rotation x and a rotation y. So what happens on those is that in the rotation x, it uses the horizontal position. And we can take a look at that really quick. We're just going to go over here and do a rotationX: 90. Now what do we expect from 90 is it's only going to go 90 degrees. So if we remember what happened there, it only went sideways. What should happen here is that it's probably going to disappear on us altogether. Let's take a look. So here I am back over in the browser. I'm going to refresh it. It's going to reset the toolbox, and we'll reanimate. And you notice that it disappeared. Now that wasn't because of the alpha. That was because our toolbox rotated on the x axis or the horizontal axis, and we rotated it 90, which actually right now it's so thin you can't even see it. So if we wanted to see it again and make it look like it flipped upside down, you're going to have to take it to 180. So here I am back over here. I'm going to change this to 180. I'm going to get rid of this alpha. I just wanted to show you that real quick. Also something to think about on this alpha is it starts off at 1, which is totally opaque, down to 0, which is invisible so you can't see it at all. So it goes from 1 to 0. Now, we're going to do rotationX: 180, so I'm going to save this. Go back to my browser. And now let's see what that toolbox does now. So as you can see, it did a complete flip on the horizontal axis. What I would recommend doing is pausing this video for a second and changing that rotationX, rotationY, and just rotation, and let's see what happens. Now, moving on with other properties, I'm going to jump back over to my code and show you something else really quick. We can change the height and the width of that image. So we can say height of, let's say, 200 for instance. And we're going to jump back over and actually take a look and see what happens to our image on the page. So here we go. We're now in the browser, and I'm going to refresh. And you'll notice that it did get bigger. It went up to 200. But all the other icons moved. Now don't forget, we're animating this image and making it bigger, so it's affecting all of the other elements around it. So in order to fix that, you would have to go back and change your CSS. Now, I'm going to change this really quick just for this example. Jump back over to my code. I'm going to jump into my CSS here real quick, and you'll notice that the tools do not have any position on them, so I'm going to give them a position of relative. Next, I'm going to give the image, all of the images in there, I'm going to give them a position of absolute. Now what this is going to do is when you take something and position it absolute, it takes it basically out of the rendering of the browser. So none of the other elements care about that one image. So you would have to go in there and position all of those accordingly now that we did that position absolute. I don't want to go through there and do that right now. I just want to show you what it's going to look like. So let's jump back over to our browser. And I'm going to refresh this. And you'll notice that it did move down. Now it's moving 250 px, I believe, from its current position, which is right here in the middle. And notice it did not affect any of the other icons. So, that's what you have to preplan, think about what you're going to animate, and think about the positioning properties. Now, it's a good habit to get in to position these relative or absolute because the animations work a lot better. But I'm going to go back and take those out because I got kind of a trick that you can do in case you have all of these other elements in there and you don't want to go back and change all the positions to absolute and relative. There's something else that you can do. I'm going to go in, and I'm going to remove that position absolute. Now, remember, it is good practice to put those on there and animate. But just in case, you can actually add something else here, and that is a scale. So you can actually change the transform, CSS transforms of scale, scale X, and scale Y. Now scale is just like rotation. It actually changed both of them. And scale will actually keep the aspect ratio of this. But let's see what's happening if we change the scale of this. And we don't want to change it to 200 because the scale is basically---1 is the current size, and if we do 1.5, it's going to go to one and a half times the size. So let's check it out. I'm going to refresh this page. You're going to see all the icons go back to normal. Toolbox should go in the middle of the page, but it's going to scale up. And it did get bigger. And notice how it didn't affect any of the other elements on the page. So that's exactly what we want. So now our toolbox is in the middle of the page, and it's looking pretty good right there. But that Green, that word Green is white, and we may want to change that, maybe to red to draw it out a little more. So that's another property we can change. Let's go take a look at how we do that. Just like any of the other tweens that we have written, we can actually start writing another one. So I'm going to come down here and say TweenLite.to, and now we're going to call this just using the CSS selector, which in this case, I'm going to come down here and call this word Green, and I'm going to use the class that it was given, which is asapReg. You do that by basically putting in a string, ".asapReg". Setting the time. I'm going to do this for 1 second. And I'm going to set the color. So I want to change the color of this to a red. Now notice I left that in a string, that hex code. Let's jump back over and see what happens now. So, we should see the white letters turn red. And you notice that it did in the same amount of time, 1 second. What else can we change? Well, maybe we want to change the font size. So maybe we want that to get a little bit bigger to make more of a statement when that toolbox gets bigger. I'm going to jump back over, and all you have to do to add another property here is just comma, and maybe we want to do font size. One thing to remember with GreenSock is that it doesn't use the hyphen like the normal CSS. So if you have font-size, in GreenSock, it's camelCased fontSize. If you have background-color, it's no longer that. It's backgroundColor camelCased. So just remember when you do that. Now, we want to change font size to something like maybe 200% or let's say 150%. So this is the way I wrote it. I'm going to go back over and see what it does. I'm going to refresh the page. So you'll notice that as the tween worked, it turned red just fine. And then at the end, it got bigger. Well let's go in and fix that real quick. So here I am back over in the code. And what's really nice is the fact that I can actually do a relative size. So, I can go in and hit +=, and it's going to add that onto the current size. And as you can tell, we can go over and change that. So I'm going to jump back over to the browser, and we'll see what happens. But you'll see how much nicer it works using the relative syntax than it is just the actual changing the percentage. So let's refresh it. And now you'll notice that it got a lot bigger and the toolbox, it tweened with the toolbox. Let's get that down a little bit smaller. So let's maybe take it down to 50 or make it 75, something that we can see. I'm going to refresh this. And now you'll notice that the toolbox comes in, it gets a little bit bigger, and the text animates just fine. So take this time before you move onto the next section, and explore some other CSS properties and other animations that you can change with just that little line of TweenLite 'to.' In the next section, we're actually going to find out what happens or what we could do when this tween is complete. Animation Complete Function In this section, we're going to take a look at what happens when our animations are complete. So in the previous section, we looked at adding different properties into our simple tween, our animation. And we learned how to tween the CSS properties, and we did some CSS transforms as well like the scale and rotation. Well now that the animation is complete, we want to do something else. In this case, we're just going to take a look at what happens if we want to return everything back to normal. So how do we do that? GreenSock has done a great job of creating an onComplete function. And, basically, it's just a way that we can actually call one of our own methods and then do something else. So, in order to do this, we're going to start off by writing our own function first. And what I'm going to do is I'm going to animate everything back to normal. So we're going to start off with the toolbox first. But I want to write a simple function, and I's going to put returnToNormal. And that's all we do right there. Now, we're going to copy line 6 here, and I'm going to paste that right here in this returnToNormal, except we're going to return everything to normal. So what needs to happen is that it all needs to go back to 0. So I'm going to change 290 back to 0. Because, remember, this is based on its current location. So, on line 6, we moved it 290 px basically in the x direction from its current position. So when we actually go to 0, it's going to return it back to where it was. And the scale needs to come back to 1, now 1 being it's normal size. So that would take everything back to normal, and it would do it all in a second because that's what we have here. Now how do we call this returnToNormal? Again, like I said, it's just like any other property that's added in here. We're just going to put a comma, and we're going to do an onComplete. And then we're going to call our function. So we're going to put returnToNormal. Now, we're not going to call this function as soon as it gets ran, so we just need to take off those parentheses there and save it. So what's going to happen is this is going to wait for 1 second, and then it's going to call this onComplete function, which is this one down here. And then our TweenLite is going to return the toolbox back to 0,0. Let's take a look at see what happens. As you can see, the toolbox is in the center. We had turned our green text from white to red and made it larger. Now that we added that onComplete function, let's see what happens to the toolbox. It should go to the middle, stay there, and then go back to its original position. I'm going to refresh the page. As you can see, it did that. It came down, everything got bigger, and the toolbox went back up. So that's exactly what we wanted it to do. Now we didn't do anything with the word Green yet, but we will. So I'm going to go back to our code. And let's take our letters back to normal. So this would actually, since we both have them under 1 second, we could take this and paste it in here. Now one thing you have to be careful of is if this tween up here runs a little quicker, so let's say it's like a 0.5, and it calls returnToNormal, and we try to return this text to normal next, it would only get about halfway through the original animation and then get overwritten, and it would just go back to the normal. So in this case, we could call one function returnToNormal, and let that do it. But just for practice, and, again, this is just for practice, we are actually going to write our own text back to normal function. So I'm going to come down here and write a new function. I'm going to call that returnTextToNormal. So now we can copy this line of code on line 8, paste it down here, and return everything back to normal. Now, this was white, so we're going to return it back to white. Now you can use three letters here. And this was based on the relative position, or not relative position but the relative of its size, so in this case, we went up 75 px basically of the last size. So instead of doing that, all we have to do now is just take a -75. So we went up 75, let's just come down 75. Now one final thing we have to do is actually call this onComplete. And we're just going to put returnTextToNormal. Now remember to take off those parentheses. And now we should be good to go. Now let's go take a look at what happens. Now you can see everything is where we left it. I'm going to go ahead and refresh the page. Toolbox comes down, goes back up. And as you can see, the letters went back to normal, and the whole page looks about like the way we had when we started. So, what else can you do with onComplete? Well another thing that you may want to do--I'm going to switch back over to the code-- what if you want to pass parameters in? So this is really nice so we don't have to keep calling and using these selectors. We can pass parameters to them. So maybe all of our elements or everything are in an array, we can just pass that array. But in this instance, just to make it very simple, I'm just going to put a comma here and put onComplete, and then we want to pass params into it. Now since that does say Params, it's expecting many of them. So, usually when you pass many objects into one thing, it's an array. So that's what we're going to do. We're going to create an array there real quick. And for this instance, I'm actually just going to pass the toolbox in. Now, and I'm going to do the same thing down here later on, or you can try that for yourselves. But now that we called returnToNormal and we have some onCompleteParams that we're going to pass to that function, we actually need to put something in here. We need to add the arguments to that function. So, we're going to actually say object here. And instead of this toolBox, we are going to put object here. Now you could be a little bit more cautious and put if(object) and then close it out and then move this line up. Now let's see what happens and see if everything still works like normal. Now, remember, we're passing the toolbox down to our function, and then inside our function, now our toolbox is known as obj or object. So let's see if it works. Everything's back to normal. And it worked just fine. So, basically, that onComplete passed over our element to our toolbox, and then it used that object to move it back up to normal state. As you can see, the onComplete function can do a lot of things. And it's important to understand how to pass those parameters to new functions. Again, this is very simplistic, and it's just to help you understand how to write the code and how everything gets passed. In the next section, we're going to take a look at how to delay our animation to make it pause when we need to. Delaying the Animation In this section, we're going to talk about how to add delay to our animations. Right now, our animations start right when document is ready. Up here in this function on line 2, we call startTween, which then comes down here and runs the tween on 6 and 8. So how do we get those to wait? For instance, let's say that we want our toolbox to wait 1 second before it starts. GreenSock has done a great job. All we have to do is write delay: and then how many seconds we want it to delay for. Now with this delay 1 second, our toolbox is going to wait 1 second. So, basically, since our animation for our text is 1 second, the text is going to grow, turn red, and then toolbox will start moving. Let's take a look at that. I'm going to refresh the page, and we'll see what happens. Now as you can see, the letters got bigger and turned red, and then our toolbox started to move. I'm going to refresh that one more time. In this scenario, it actually looks like the toolbox waits even longer than it does for the red text to go back to normal. That's not a problem. We can change those to any value that we want. We're going to go back and change that to a value that looks like it may start at the same time going back to normal. I'm going to change this delay back down to about 0.70 or just 0.7, save it, and let's go back to our browser. Now I'm going to refresh this, and we'll see what this does. Now this move started moving a little bit faster than probably what we wanted to, so we'd have to play around with that a little bit. But as you can see, it starts to move right when we kind of wanted it to. Now you can change that delay value to anything that you want to. Let's take a look at another way to use delay. Let's say, for instance, we wanted to add kind of a stagger to our delays. I'm going to add a variable up here called just d, and it's going to be equal to 1. And I'm going to use d as delay, and I'm going to put that d right here. So that can be equal to anything that you want it to. Let's say that we wanted our text to wait a half a second longer than our toolbox before it moved. All we have to do is come down here on line 10, and put the delay in there. We add our d, so now this has been delayed for 1 second. But we said we wanted it to actually wait for maybe a half a second longer. All I do there is actually just do a +.5. And what this is going to do is just take 1, and we're just going to add 0.5 to it. So let's see what this looks like now. I'm going to refresh the page. So you notice they had kind of a delay to it. So the toolbox waited for 1 second. The text waited for 1.5 seconds. Let's take another look. It worked perfectly. And, basically, what we're doing there is just staggering our animations. Later on in the module, we're going to look at a more advanced way to do some staggering. But right now, I just wanted to show you how we can build upon the simple animations that we had. It was very easy to add these delays to these other animations. And if you want to, just to build upon what we've learned in the other sections in this module, we're going to pass this variable down to our text, and we're going to delay that even further. So right here, I'm just going to, in our text, returnTextToNormal, I'm going to add an onCompleteParams. And, remember, when we pass an argument in there, we have to pass it as an array. And we're going to add d to that. So we're going to call returnTextToNormal. We're going pass basically our delay value. And then down here in our returnText function, we actually have to put an argument in there. So we're going to actually just write---we'll just use delay here, and we're just going to write delay, and then we can pass in the delay here. So now what's going to happen is this is going to be delayed 1.5 seconds. It's going to call our onComplete function building upon what we've learned in the last section and the sections before. And we're going to delay this 1 second as well. Let's take a look and see what happens. I'm going to refresh the browser. And you'll notice now that everything gets completed, and then finally the text goes back. It waits 1 second. So, it's very simple to do and very easy to actually get our animations to delay. GreenSock has done a great job of allowing us to change multiple properties in a very simple one line of code. So as you can see, adding the delay was very simple to do. And you can stagger and build upon all of these animations to do different things in your website. Simple Animation Summary So in this module, we learned how to create very simple animations, how to change their properties, how to add delays, and how to add an onComplete function. I really wanted to show you how simple it is to basically animate any element that is on your web page. GreenSock has done a great job of making this very easy in one line of code. In the next modules, we're going to do more advanced ways of animation. And we're going to learn how to create timelines, how to stagger them successfully, and use the full website to basically animate objects in. So let's get started in the next module with timelines. Animation Timelines What Is a Timeline? In this module, we're going to take a look at GreenSock's animation timelines and what they have to offer us. So what is the definition of a timeline? The best definition I could fine that I truly believe that represents what we're doing here is the graphic representation of the passage of time. So in the last module, we were animating the images in the nav bar like the toolbox and then changing some text. So most of those are graphics inside of our application. So it is the passage of time that they take to tween all of that and how are our timeline can run things smoother. So what are some other benefits of having a timeline with GreenSock? Well, it allows you to sequence complex animations. So just like in module 2 or the last module, you'll notice that we had to have three or four tweens working and then figure out how to put the delays on them and sequence the time so it works properly. With the timeline from GreenSock, it does it all for you. And we'll take a look at all of that later on throughout this module. Another thing that the timeline lets you do is it lets you play it, stop it, resume it, you can reverse it, and you can also seek to a certain time or a label. And we're going to learn how to do all of this in this module. But it is so important that you can stop it, play it, especially if you're creating any HTML games or web games or even have some animation on your page that needs to stop if a user does something. Like I mentioned before, it saves you from calculating all the delays that you have to put on each tween. That can be very complicated, and if you're anything like me, you hate adding up all of these things, doing math even though it's very simple math. You have to think about if this tween is 1 second and the next tween is 2, how long do we actually have to delay this to make these two tweens? Now, in our last example, they were very easy, but by the time you created 10 or 15 tweens, it could be very complicated. The last thing is that you can add a lot of vars to the tween constructor to allow more control. Just one of those that I want to tell you about is just like on the onComplete like we used in the last animations, you can actually add this to the timeline. So when the timeline's done, it actually calls a function. You can also do updates so as the animation is progressing through the timeline, it can send you updates on where it's at. So why don't we go ahead and just take a quick look at an example of what GreenSock timeline animation would look like. So here we are in our last example. And as you can see, I added some controls over on the left-hand side-- the Start, the Pause, and the Stop and Reverse. I've also changed the animation a little bit. No longer does our toolbox actually go down into the middle anymore. Let's see what a timeline would look like. So I'm going to go ahead and hit Start. And you'll notice that these icons are moving out of the stage. And they also all move differently, and that's because I've put easing on them. So what if I wanted to reverse what we just saw? I'd just come down here and click on this Reverse, and you'll notice that it reverses back through the timeline. So, basically, we are actually just scrubbing a timeline. We're going to play it forward and reverse it back. I can start this again, and at any point in time, I can pause it. I can play it again. I can stop it. I can reverse it, which will end up reversing it. And, again, just like that, I can hit Pause, then we can start it and go through the timeline again. So as you can see, a timeline is very powerful, and those animations are very, very fluid and smooth. And as we go through the rest of this module, you'll notice that a timeline is very powerful, and you will actually probably start setting your tweens up in timelines more than you will individual tweens. So let's go ahead and get started creating our first timelines. Setting up Your Timeline in Your JS File In this section, we're going to talk about how to create your timeline and set it up in your JavaScript file. So first off, I want to talk about how I set up the HTML different than I did in module 2. So as you can see by the example, we have the Start, Pause, Stop, and Reverse buttons over here on the side. And as of right now, they do not work at all. If I refresh this browser, you'll notice that nothing moves on the page at all. We no longer have our toolbox moving down to the middle and our text growing bigger and turning red. So we're going to actually create the timeline in our JavaScript file and actually get that all set up to create an animation and get it moving in the next section. So how do we do that? Where do you go? And what do you need to get a timeline going in GreenSock? Well first off, we need to download a couple of scripts. Now just like what we did last time, we're going to go to the GreenSock website. So as you can see here, we're at the GreenSock website, and all you have to do is click on the Download GSAP. Now, with this top link, it is TweenMax, and we covered this in module 2 in the first section. But I want to customize it because if you remember correctly, when we left off, we were using TweenLite. So I want to customize this. So you will notice that this has the TweenLite and the CSS plugin. But we need to add the TimelineLite. So I'm just going to go ahead and click this. And you notice it adds an extra script here to our screen. But there's a TimelineMax and also a TweenMax. And like I mentioned in module 2, these offer more features. And we're going to get to those later on in this course. But right now, I just want to stay with something very simple. Also, TimelineLite, as well as TweenLite, are very small in file size, and sometimes that really matters especially if you're doing a mobile application or you want something to load really quick. Now one other thing that we want to include for our timeline is this EasePack down here. So you'll notice now that we have four actual scripts that we need to bring into our code or into index.html page. What the EasePack does is it actually lets us do a bounce in, so as you see all of our images moving and animating, it'll actually do a bounce in or a back out and in on the transition or animation. So, that's what the EasePack does. So let's go ahead and grab all four of those if you would like. And notice they're stacked in order of how they should be, and let's go to our code. So here we are back in PhpStorm. And we have the code up, and I'm just going to open this up just a little bit to show you the differences that I have in my HTML file. One thing that I did was on our tools up at the very top, I gave each of them an Id. So we have toolBox, weightLifter, the crazy-fast symbol, and then the leaf, and I just called that crazy and leaf. The other thing I did was I brought in the scripts down here at the bottom. As you can see, we have the TweenLite, TimelineLite, the EasePack, and the CSSPlugin. Those are all four of the scripts that you should have just copied. I want you to paste those there. Now make sure that you paste them in between our jQuery script and our own app.js file that we created in the first module. And it's also available in the demo folder that's provided with this course under module 3. Now let's take a look at what we have in our app.js. I'm going to open up this app.js, and we're going to spend most of our time in the rest of this section inside of this JavaScript file. So just like in module 2, I have my $(document).ready with an init function. And then I call the init function right when the document is ready. So here is where we want to start creating our timeline. So now that we have all of our script tags in, we have our Id's for all of our tools, and we even have Id's for all of our buttons up here at the top. Now we can start actually setting up our animations. So the first thing that we want to do is get the animation going. The first thing we're going to do is just create the timeline and get it set up and then just demonstrate it before we move to the next section where we actually start making it work. The first thing that we need to do is actually create a variable with a name for the timeline. And in this case, I'm actually going to call this toolTimeline. And that's going to be equal to a new instance of TimelineLite. So we just created a new instance of this, and now it is stored inside of this variable right here. So how do we actually make this timeline have some sort of animation? We have the timeline set up right now. The duration is 0. There's no animation in it at all. But I want to show you how to create your first actual sequence. So we're going to go ahead and add our first animation to the timeline. In order to do that, you type in toolTimeline.add. So whatever goes in between these two parentheses is the first animation that goes in there. So right now, we're going to type this just like what we did in our module 2 in the first example tweens. We're going to do TweenLite.to, and we're just going to target the toolBox. Then we're going to actually say it's going to last for 1 second, and then we'll put our arguments in there. I'm just going to make this actually go up 100 px so you can still see the bottom of the toolbox, but you're going to actually witness it going up. So what we just did was we took this tween, and now we added it to the timeline. So this timeline now is literally 1 second long. Let's take a look at it and see what happens. Now we're over here in the browser. I'm just going to refresh the page. And you'll notice that toolbox went up to the top. Now you're going to say, Well, that's not a big deal. But now I'm going to actually sequence them very easily. Jump back over to the code. I'm going to duplicate this line, and then I want to target the next in line, which is weightLifter. So I'm going to copy this here, and I'm just going to change it. Now one thing you'll notice is I did not do anything else. I just changed the Id, same duration, same y value. We're going to move it up -100. No delay, no anything like we added the delays in module 2. To sequence them, you do not have to do that now. Let's check out our animation and see what happens. I'm going to refresh this page. You're going to see the toolbox flicker and jump back down. And then you're going to see it sequence with the weightlifter. And you'll notice that both of them moved up. It took 1 second for the toolbox to move up. As soon as that was done, the weightlifter moved up. So as you can see, that timeline is now 2 seconds long, and it sequenced our animations for us. So that made it even better for we don't have to worry about the delays or anything else. So in the next section, we're going to talk about all the other features that we can add very quickly to these simple animations to get all of our tools moving up at the top. We'll also learn how to start, pause, stop, and reverse them. So let's move onto the next section and get all of this working. Creating Your First Timeline In the last section, we ended up just tweening the toolbox and the little weightlifter guy. And then we pretty much left it at that. In this section, we're going to build upon that, and we're going to animate the last two icons that we see at the top in the toolbar. And then we are going to add an easing property to those as well. So let's go ahead and jump over to our code and get that started. So as you can see, the last time we left off, we had the init function going. And we had the toolbox animating and the weightlifter animating in sequence. And each one of those took 1 second to do. So I'm going to go ahead and add the crazy time, so basically that's the time limit of crazy. And then also the leaf that we have there at the end. And you can get the Id's for those over here on the left-hand side. Now I've got mine squeezed down quite a bit. But on line 19 on mine, we can actually see that it's crazy. And on line 22, the Id is leaf. So what I'm going to do here is I'm actually going to duplicate this line a couple of times, change this to crazy, and change this one to leaf. Now they're all going to go in sequence right now, and they're going to go up a negative of 100. So, again, I put a negative of 100 so they don't go off the screen. I just want you to be able to see the bottom of them just to show you that they're moving up there. You're going to see, though, all of these jump a little bit when we do them, and that's because the browser's resetting them back to their normal positions. We'll talk about what you can do to stop that in your application later on in the module. So here we are back in our browser. I'm going to go ahead and refresh this screen. And now you'll notice that they all go up in sequence. And they all take 1 second to do that. Now, again, we had a little bit of a flash of all of them moving back down to their position. But, basically, we got them all moving. Now, let's go over back to our code and see what we can do to make those look a little nicer and also get our buttons working. So I'm going to jump back over here to our code. So we have these in the timeline called toolTimeline. Now we need to put some listeners on our buttons. So if you're not familiar with where your buttons are, we have those at the very top. I'm going to lower this down just a tad so we can see it. We have start Id, pause, stop, and reverse. So let's go ahead and actually add a listener for the first start one. So I'm just going to do this real quick. And, again, we are using jQuery, so we are applying this function to it. And now that we have that and we have access to the toolTimeline, we can actually say toolTimeline.play. And that will actually start the timeline playing. The problem is that when the init function gets called, it starts playing anyway. So let's go ahead and add a stop to this and see if we can get this to stop. So I'm just going to go ahead and grab that, paste it again. I'm just going to change this one to stop and change that right there at command to stop. So I just changed the method call so we're just actually doing timeline, and we're just calling a stop. So now we have all of our play button, our start button, and our stop button working. Let's see if we can stop this timeline from playing. It's just that simple in GreenSock. So here we are back in our browser. I'm going to do a refresh so we can see our icons start to move, and then we should be able to click the Stop and actually click the Start to start and stop it again. Now, again, as soon as the init function gets hit, that animation timeline starts to run. We will take care of that here in just a second. But as of right now, that's the way it is. Let's do a refresh. And now I can hit Stop, and they actually stop. You see the little weightlifter stopped right there. I can hit Start. It starts playing. And stop it and start it again. So very easy to control the timeline. So if you think about this as basically you're playing a movie and the play head's going across, we can stop that at any point in time. And then we can start it again. Let's go back. And we can do a couple of things. Now, one thing I don't like doing is saving all of my duration times as numbers. I like to put those in a variable. So I'm going to go up here at the top, and I'm going to call that duration, and we're going to say that that's equal to 1. And then we're going to change that 1 to duration. And that's just so we can change that very easily. So if we wanted to go to 0.5 really quick and make them move quicker, that's one place to do it. I'm also going to add the extra functionality on the buttons down here at the bottom. So, I'm just adding. So I'm going to do these in order. So this one's pause. And don't forget that GreenSock has a great documentation on their website, and you can go there and find out what all of these do--and, basically, we're going to look at them a little bit--and read more in-depth about that. So we're going to call this reverse. And, of course, it's going to reverse. Now we have everything going. These are going to move just a little bit faster. I'm going to jump back over the browser, and we can watch this. So I want to refresh. Now our Start, Pause, Stop, and Reverse all work. Let's see what happens. I'm going to refresh it. Stop, that works. Let's hit Reverse and see what happens. You'll notice that it was reversing the timeline. I'm going to hit Start, now it starts it again. But you'll notice that it went back forward in the timeline. So I'm going to hit Start again, and it doesn't do anything. You hit Pause, and it doesn't do anything. But we can reverse it. And we can play it, and we can pause it, and we can play it, and pause. So that's what the play and pause does. The pause is actually meant to start it, I mean the pause is actually to pause the animation. The play starts it. And the stop actually stops it. So we have all of our buttons working. Let's get this looking a little nicer. So when our timeline starts, we want it to be paused. Now we want to put that in here to the timeline. Now we want to pass arguments to it. So make sure you put the curly braces in there, then we can type in paused and then true. Now it's going to be paused when we get it started. So let's go ahead and add some easing to this. Right in here after the 100, I'm going to add another property, and it's going to be ease. And we're going to do Linear.easeInOut. So that's all you need to do to get this ease to work. Now, remember, we imported this ease package down here, this EasePack, we imported that last time so that's why we can add these to it. So I'm just going to copy this line and pretty much just paste it in the rest of them. Now this is how easy it is to change that. For the first one, we're going to do Linear. For this one, we're going to do a Bounce. That's a capital. The next one, let's do an Elastic. And for the last one, we'll do a Back. So these, we're applying a different ease to all of the tools up at the top. And let's see what that does. I want to go ahead and hit Refresh in my browser, and we'll get this working. Now you'll notice that it didn't start right away. That's because we put paused true in the timeline constructor itself. So let's go ahead and hit Play. And now you can see they all have some sort of easing on them. Let's reverse that. You'll notice the first one, that Linear, is pretty smooth. The rest of them do a little bounce in or back out. So we can actually start that again. You can pause it again. You can play it again. And you can reverse it. Nothing's changed by adding these properties. So in the next section, we're going to add some more arguments to our timeline, and we're also going to add some more properties to that to make those look a little bit nicer. Animation Timelines Continued Using TweenMax and a New Syntax So in this section, we're going to take a look at bringing TweenMax into our project, which will include TimelineLite, TimelineMax, the CSS plugins, and a lot of other different libraries from GreenSock. We're also going to take a look at a different way to write our timelines and our tweens that go into our timelines. It's a more efficient way to write them, and it's a lot cleaner to look at in my opinion. I'm sure a lot of people look at things differently. But I find this an easier way to look at it. It does the same thing, but you'll see for yourself, and you can choose which way you would like to do it. So I'm here at GreenSock's website again, and I want to go ahead and download the GreenSock, and you're going to get this link of course. And we want to go ahead and customize it. Now just for sake of going a little quicker, you can just copy this link because that's all we're going to do. But I want to show you if we customize it, what all--when we include the TweenMax--does this include? We're going to click TweenMax here, and you'll notice that you get TweenLite, TweenMax, TimelineLite, TimelineMax like I mentioned before. You get the EasePack. You get the CSS plugin, the Bezier plugin, directionalRotation, and the attribute plugin. You also get the roundProps plugin. It's pretty much about everything you're going to need for the rest of this course. Now, once you do this, you only need this one script tag. So I'm going to go ahead and click on that, copy it, and we're going to go over to our project and insert that. Now when we get over to our project, we need to make sure that we take out the right script tags and replace it with the one we just copied. Let's get over to our code and check it out. Over here in our project, you'll notice that we have the CSS plugin, the EasePack, TimelineLite, and the TweenLite script tags in here. Now what we want to do is you want to remove all of those except for our JavaScript file and jQuery's JavaScript file. I'm going to delete that. And now all you have to do is paste the script tag that you just copied from GreenSock's website and put that in here. This'll make our project look a lot cleaner, and you don't have so many script tags on there. Now if you're worried about size from those, then you can customize it a little bit easier for your project or a little bit better for your project. But right now, I just want to show you some different ways to write the timeline. With that in place, I want to jump over here to our app.js. I'm going to widen this out a little bit, and let's take a look at our project a little bit. So just a refresher from the last module, when the document is ready, we go ahead and call init. Now our timeline was paused when it first started, and we had control buttons on the page to let us control the timeline. But let's take a look at what our timeline was set up like. Notice that we have TimelineLite, created a new one. And then we added the tweens to the timeline. There is another way to write this, and we can continue to use TimelineLite if we would like. But I want to go ahead and change this TimelineLite to TimelineMax. And I'm going to take out this paused is true. So now we just have a normal TimelineMax timeline. Now here's the different syntax to write this. To me it's kind of redundant to have a timeline and you're entering these tweens in there. Surely if you're entering a tween into a timeline or creating a timeline, it's got to have some sort of animation to make it work. GreenSock's done a great job of doing this for us. And instead of adding a TweenLite or a TweenMax.to, you can just use your timeline and put to, then you can get rid of your TweenLite or TweenMax, and you can get rid of that syntax. You can do that to all. Since this one is going to be a to, we're going to change add to to and just delete the first half of this TweenLite.to. And don't forget to remove the last parenthesis. Again, go ahead and do that to all of those. And don't forget to remove the parenthesis. Now you can also do from here like we have done in the past. But since all of my tweens were all to, we're going to just leave it that way. And I'm just going to remove this last parenthesis. So you'll notice that our timeline is actually the one that is controlling the to and the from. Now this'll work exactly the same. You'll also notice when we update this, I don't have any more of the control buttons, so I'm going to actually remove our click functions for our control buttons. And our timeline is just going to immediately run when we do this. So I'm going to jump over here to our website, and you'll notice that our page doesn't have any more control buttons on it. And it's set up just like normal. I'm going to go ahead and hit Refresh, and you'll notice that all the tools jumped up to the top. It acted exactly the same way that our last module showed. Now we didn't have the control buttons to stop it, but I'm just going to refresh this, and you'll notice that they jump up there. Our code is slightly different, but it still acts exactly the same. It's a cleaner and more efficient way to write this timeline in my opinion. Now I have written a lot of tweens in my time, even in the Flash era. And to me, this is a real easy way to do this. I also like the fact that I'm not using the jQuery syntax here to call our DOM elements. Now that I've showed you how to bring TweenMax in, we've changed our timeline to TimelineMax, and I showed you a different way to actually add the animation to the timeline, which is a lot simpler. I want to show you a very nice cheat sheet that was created by a gentleman they nicknamed ihatetomatoes. Let's jump over there and check this out. He's created this nice cheat sheet for you to learn GreenSock. Feel free to download it you would like. Again, I'm going to go back and show you this web address. Now, GreenSock has incorporated this cheat sheet into their website in different areas. It's just scattered throughout their page. You can also find it in their forms. But this is the direct link to the cheat sheet for GreenSock. Now that I've showed you the cheat sheet and we learned a new way to write the timeline, I want to go into the next section and start showing you how we can make a more advanced animation of a website being built in using the techniques that we have learned in the last module. This will show you how to stagger an array of DOM elements. It will also show you a lot of different timing mechanisms that GreenSock allows us. So let's get started in the next section building our more advanced animation. Next Show How to Build in a Webpage Pt1 In this section, we're going to talk about how to build in a website using what we've learned so far in the previous sections and modules. Let's take a look at what we're going to be building in the rest of this module. Now you'll notice that the GreenSock main title at the bottom comes in scaled really large. JavaScript animation title comes in. And the tools come sliding in. And the superman comes sliding in. We're going to learn how to do that, and we're going to divide this up into little sections because we need to change some of the HTML and CSS to get those to work right. We're also going to learn how to animate an array of DOM elements in one line of code, which makes it really nice and easy and even fast. Let's jump over to our code and get started. Here we are from where we left off in the last section. We changed the timeline. We got rid of the TweenLites and moved the to's and from's into the timeline itself. Something else I want to talk about. When we started this course, I started putting everything into the $(document).ready. I did this because it's very quick and easy. But for what we're animating, you want to make sure that all the images or any DOM element is loaded on the page. And $(document).ready does not do that. Now, this course is not covering jQuery and everything, so I'm not going to go into great detail. But basically $(document).ready just means that it's read all the lines of code, but it doesn't mean it's displaying on the browser. So how can we make sure that all of our images are displayed in the browser? We can use window and then load ($(window).load). And, basically, this just ensure that all the images are showing on the page before it runs any functions or any code that's inside of it. Now that we have that done, let's talk about how we're going to build our web page in. I want to take it in small chunks. The first thing I need to do is animate that main title or where it says GreenSock at the bottom, we want to animate that in first. So I am going to comment all of these out except for the top one. And the way to do that in PhpStorm is do Command+/ or Ctrl+/ for PC. The next thing we want to do is actually pull in the target or the element that we want to move, which if we look at our HTML here, it's going to be mainTitle. So we're going to move mainTitle over here. And notice that it is a class. So we call it mainTitle. Something else that we want to do is we want to make this scale. So we're going to scale, and we're going to move it up to about 25. Now, there is a scale x and a scale y if you want to change that. If you just put scale, it's going to keep the aspect ratio and change the size both ways. So, we're going to leave this scale. Notice how we're leaving this to from, it's not to anymore, it's from. So, basically, what it's saying is that it's going to go from a scale of 25 to what it's normally supposed to be. Something else that'd be really nice is if the opacity was set to 0. And this is one thing I like about having this from is that we can actually set the opacity to 0 and never have to go into our CSS to do it. So it's going to start off at 0, scale at 25, and then slowly ease in with a Linear ease in the easeInOut. Let's look at what we have now. I'm going to refresh the page, and we'll watch our GreenSock come in. Now you'll notice that as it comes in, it's scaled really large. But you'll notice that something popped up at the bottom of the page. It's the same thing that's showing on the right-side of the page. We have an overflow on our page. So when we scale the main title, the browser thinks that this element is extremely large, and we get a horizontal scroll. So in order to fix that, we can put it in a couple different areas. We can put overflow hidden in the content holder, but I don't like personally doing that because the content holder is only width of 80%, height of 85%. And you're going to be cutting that short. So you're going to see it within the browser itself. I'm going to try this in the body, and that should take care of the right scrollbar and the bottom scrollbar. Let's jump over to our code and add that to our CSS. So here I am in my CSS. I'm in the body area. So I'm just going to put overflow: hidden, save that. Let's go back to our code. Here we are, and now let's run this. And as soon as I refresh it, you're going to see that the right scrollbar and the bottom scrollbar no longer show up. You'll notice that we get that nice animation in, and the right and the bottom scrollbars no longer scroll. That's exactly what we want. So let's jump over again in our code and start animating the JavaScript Animation title underneath the toolbar. First thing is we have to find it and find out what it's title over here in our HTML. So I'm going to scroll down through here, and right here it is, line 17. And it's called title. So I'm going to uncomment line 10 here. I'm going to change weightLifter to the class of title. And, basically, I want to do the same opacity and scale. So I'm going to copy these from our last mainTitle, and I'm just going to put those in where this y is -100. And go ahead and save that. And let's jump over and take a look at it. So I'm going to refresh this page, and we should notice that the Green Sock comes in first, the JavaScript Animation title comes in second. Now you'll notice that it actually came out. So we missed something on that one. It looked like we were saying go to. So let's make sure that's what it was. So, yes, make sure that you change the to to from because to, basically, we're saying go to an opacity of 0 and scale 25 when actually we want it to come from a scale of 25 to an opacity of 1. So let's jump over now that we have this changed and take a look at it. And I'm going to refresh this page. And you'll notice that we get both of those coming in the way we want. Except that JavaScript title looks a little funny. It looks like it has like a little sputter as it comes in. That's because of the ease that we have on that JavaScript title. Let's take a look at it and see what we have on it. If you look on the main title itself, we have that Linear ease, which is a very smooth ease. On the title, we have Bounce. All you have to do is change Bounce to Linear, and it will have a nice smooth animation. Let's check it out. Here we are again. I'm going to refresh the page, and we'll watch it all build in. Now if those are not far enough out for you, you can scale them larger, 35, 40. And that way, they're totally off the screen. So that's totally up to you of how you want it to build in. But these are going good enough for me. So both of those work really well without hardly changing any of the HTML or CSS. But I don't like the timing maybe of that title. So let's watch it again. And notice that it comes in, like the Green Sock comes in. And maybe that JavaScript Animation title, it needs to come in just maybe a tad bit later. How do you do that? Well, we're going to go back to the code. And GreenSock's done a nice job of allowing us instead of putting delay here, we can actually right outside of the last curly brace, we can add some arguments. And one thing we can add a 1 or a 2, and these are seconds. And, basically, this is how long that animation is going to be from when it's supposed to run. So right now, I'm just going to exaggerate this so we can see it. Let's make it 5 seconds. So our main title is going to animate in, and now instead of writing a delay, now this animation's going to wait 5 seconds to run. Let's check it out. So here we are, and I'm going to refresh the page. And let's watch how this functions. Now you notice the Green Sock came in, and then 5 seconds later, the title comes in. Again, GreenSock's done a great job of allowing us just to put an argument in there for the time that it wants to run or delayed. So what happens if we put a time that's less than 1 second? Let's go take a look. So here we are. I'm going to remove that 5. Our duration now is set to 0.5. So if I set this to 0.5, basically what we're doing is we are going to speed up when that actually gets run. Let's check it out. I'm going to refresh the browser, and that's about the same time. Let's go speed it up a little bit more. So I'm going to change this 5 down to 2. Let's go check it out. I'm going to refresh the page. And now you'll notice that both of them come in almost together. Now they're still sequenced. The Green Sock is still running first, and the other title's coming in second. We've just sped it up a little bit. So, jumping back over to the code, you'll notice that the duration is 0.5, and that's how long this lasts to come in, and then the second one runs. You'll notice that now we've said, Hey, instead of waiting 0.5, come in at 0.2. So we're speeding it up a little bit. This is a good timing mechanism because everything is still sequenced. And it's based off of this number right here. So even though we're still speeding this up, the next one isn't going to run until this one's complete. And this one's not going to run until the first one's complete. So it's still sequenced unless we do change some of these other numbers in here. So in the next section, we're going to complete our animation for the build-in, and we're going to look at how to do more advanced arguments and animate the array of DOM elements. Next Show How to Build in a Webpage Pt2 In this section, we're going to finish building out our website and looking at how we can animate arrays and add extra properties to our timelines to affect and make the animation more smooth. I want to show you the finished product one more time. You'll notice that they scale in, which we did in the last section. The two titles scale in from very large. Right now we're going to work with the superman moving in, getting that to kick the Green Sock Animation Platform title over. And then animate the array of tools up at the top to stagger in the way they do. Let's jump over to the code and get those two things working. So here we are. We're back in our code. We left with these two lines commented out. I'm just going to take those out for now, and I'm going to add an extra room in between each one of our tweens so far. So this is where the two titles are coming in. They're scaled out. Now we need to move this superman and get him working. So I'm going to jump over into my index and actually find out what it is. And it's a class called superman. And then it has an image tag inside of it. So we're actually going to be animating the image element here. So I'm just going to copy this timeline, paste it down here, and we're going to change this class to superman. And then target the image tag that's inside of it. The next thing we want to do in this one is actually change the left property. So I'm just going to change opacity to left because we want it to come in from the left-hand side and move into the right. So we're going to change that left, and we're going to leave it at 0. We're going to take out the scale because we do not want that to be scaled up. And for right now, I'm going to leave that Linear to ease out. I also want to take off this little extra property right here for timing. Now that we have that, we need to make an adjustment over in our CSS because right now, the way this is, the left property will not move that superman at all. And, actually, we need it to come to 0. Right now, the left is 0, the superman is setting exactly where he is on the stage. Let's jump over to our CSS and move him where we need to. So I've condensed down a lot of these extra properties. And here's our superman image right here. There're a couple of things we need to add. One is the position of relative. And then we need to move him off the stage. Now you could do this however you want, but I just chose to do it -70%. You can move it at a pixel value or whatever, but now we have our superman. And when it first starts, he's off the stage. Then this line of animation is going to move him to 0. The next thing we need to do is target this mainTitle just a little bit and make some adjustments. I'm going to grab this again really quick. We're going to put that in there and do the timeline, and mainTitle is fine. We don't need the opacity, though. We're going to move it to the right. Now, what are we doing here? So, right now that title sets off to the right just a little bit to make room for the superman. When the superman comes in from the left, we want it to kind of hit the title and move it to the right. Well, again, we have to make some adjustments in our CSS. The first one we need to do is find the mainTitle class, which is right here on line 80. I'm going to comment out this right -50. Now what that does is that right -50 was actually moving that title from being centered, and it was moving it to the right 50 px. So in this instance, we want this to go to -50 px. So, this is all going to run just fine. The title's going to come in, scale in, and then superman's going to come in from the left, and then our toolbar, that main title, is then going to adjust right by 50. Let's go see if we've done it. Now here is the site that we're working with. And you'll notice that the superman came in, and then the title slowly moved to the right. Well it's amazing what easing can do. So we're going to go back over, change the easing a little bit, and then we're going to add some extra timing in. For our animation, we want this superman to do a Back.ease, and we just want him to do an easeOut. We don't want him to ease in. And then for the mainTitle on this one, we want Back.easeInOut. It definitely makes it animate a lot different by just changing this ease. The other thing is we want these things to happen prior to maybe the timeline scaling in or, I mean the title or the mainTitle scaling in. So how do we do that? The same way we talked about up here on this title. Now this is going to come in durations of a half second. So this one takes a half a second to run. The second one is a half second, which now we're up to 1 second before the superman image moves. So if you want him to come in just a little bit sooner, you can add that property in here. We're going to leave it like that, but our title, if you remember correctly, was delayed a little bit. So we're going to change that. And I'm actually going to start off with a 0.9, and we'll see how close we come on that. Let's check it out. So we're going to refresh this page. Now you'll notice we need to tweak it just a little bit more. But I'm going to refresh it, and we'll watch it. Now we're really concentrated on the superman hitting the G in the Green Sock and moving it over at the same time. So there's just a little bit of pause. So let's fix that. Here we are. I'm going to lower this 9 maybe down to maybe a 7, and we'll try that. You may just have to work with it to get it to where you like it the most. I'm going to refresh the page, and we'll see what it looks like. So that works pretty good for me right there. As soon as the superman came over and hit it, the Green Sock moved to the right. I'm going to leave it right there for now. If you want to tweak it, go ahead and play with those numbers. Now let's get the toolbars coming in as well, and skewing the superman a little bit more. So if you'll notice when we refresh it, it doesn't look like he's coming in super fast. We need to skew him up at the top. So we're going to do a few things while we're over in our code. The next thing is to get the superman to skew. So, I'm going to paste this down here, and we're going to leave it at the superman image, same duration. The only thing is we want this to skewX, and we want it to do it by 20 degrees. Now, to do that, we're going to leave this Back.easeOut. But we also want this to start happening when he starts to animate in. So I'm actually going to set this maybe to 0.9, and we'll try that out. Now that's going to get him to skew. So anytime you see something racing across the stage, it always seems like the top of the element or image is always dragging behind a little bit, which simulates it moving really fast, and that's what we're doing here. So I'm going to leave that like that. Now let's talk about animating an array. So we have an array of tools up at the top. We just need to make it so that GreenSock knows that they are an array. So, I'm going to come over here to my index, and we have our tools up here at the top. And I'm going to widen this up just so we can work out of it a little easier. So we have the tools, and then we have all these images in them. Well, GreenSock doesn't know they're an array right now, but we're going to do that by just giving them each a class of tool. I'm going to go ahead and highlight this and paste that in each one. Now we're not going to style this tool at all. We're not going to add color. We're not going to do anything. But what that will do is tell GreenSock that, Hey, inside of tools, we have four objects now inside of an array called tool. There is one thing to get these to move fluently, and that is to go to our CSS. We're going to move up to the tools, which his right here, and we need to add a couple of properties in there for the tools. One is we need to move the tools off the stage. They weren't off the stage last time. So we're just going to add top, and we're just going to do a -150 px there. We also need to add a position to this so we can actually move the top. And we're just going to leave it as relative. Now, we need to just position relative to the actual class of tool. So the way you do that would be to do content-holder .tools and then .tool. And then just set the position to relative. The reason why we set the position to relative is so we can actually change the property of top or right or left. So now we can come over here and actually animate those. I'm going to copy this timeline.to right here. We're going to change a few things. One is with TimelineMax, we are able to do a staggerTo. There's also a staggerFrom as well, which would end up moving them off the stage if you wanted to or from off the stage to on the stage. But here we're moving them from where they're at to a certain position. The next thing we need to do is target the tool. So right now, this is actually going to target all the classes of tool, which we have four, and it knows they're an array so it's going to stagger them. We will have the timing up at the top. The only thing we need to do is change the property of top to 150. Now it's a positive 150, and if you remember when we were over here in the tools, we moved all their tops to -150, and that's why we're moving the top down 150. We can leave this to Back.easeInOut and see what that ease does for you. But now we've got one property over here, and that's our timing. We've been talking about it. We can actually make that animation happen sooner or later in the progression of the animation. But in order to get these to work and stagger them, we need one more property in there. If we were to run this right now, you would actually see all four of them drop down at the same time. But we don't want that. We want them to be staggered so each one drops separately. In order to do that, it actually takes two properties here. One is we're going to set this to 1 second so you can see a very exaggerated time. So what's going to happen now is this is going to run 0.7 seconds into our total animation. Then in between each animation of this tool, we'll take 1 second before the next one starts. Let's take a look at it. Here we are. We're going to refresh the page. You'll also notice that the superman is going to be skewed at the top when he comes in. And you'll notice that each one of the tools takes 1 second to move. Now, the superman's a little off a little bit, and I think there's one thing that we have to change on him to fix it. But let's refresh this and see what happens again. Everything comes in, and those move at 1-second intervals. Let's change all that to make this look a little nicer. So here we are. I want this to actually move a little faster, so I'm going to go down to 0.2. The tools were coming in just fine, and I liked where they were at as far as that goes. But the superman skewing, instead of going to, we want him to skew from. So he's going to come from off the stage skewed at 20 degrees, and then he's going to come back to normal. So now let's jump over and take a look at it. I'm going to refresh this page, and you should notice a bigger difference of how everything builds in. So the superman was leaning skewed over, comes in, hits the Green Sock, straightens out, and then the tools come in a little faster. Well, let's watch it one more time. And that pretty much completes the build-in of our site. Again, you can tweak all those numbers and properties to your liking. But I just wanted to give you the basic overview of how to change those properties and how to animate an array. Wrap up the Timeline Module Throughout this module, I talked about how GreenSock offers us a timeline and how you can use it to sequence your animations. I talked about how to add a TimelineMax and the many things it can do. I also talked about the CSS. Don't forget to change those positions to make your animations work properly. Some other things you have to watch out for are the to and the froms properties. Those will always get you in trouble. So just don't copy and paste. But if you do, make sure that you watch what each one of those are doing. Now one thing you may want to do is check out GreenSock's easing visualizer. It's a great tool, and I'm going to take you over and show it right now. This tool's a great tool to visualize what's going to happen on your animations. It's greensock.com/ease-visualizer. You can go on here and actually pick which one you want and then run it and see what happens. And you'll notice the green line is actually what the animation is going to do, and it shows you actually what this curve is like. So you can use a power of 1, and you'll notice that's a very smooth animation. You can use stepped, which it kind of staggers. There's a bounce. There's a slowmo, which is really pretty cool. So, moving on in the next modules, we're going to take a look at some of the other plugins that GreenSock offers to enhance our websites. GSAP Draggable Intro to GSAP Draggable So in this module, we're going to talk about GreenSock's plugin called Draggable. Now one thing this does is allows us to put the ability to drag any kind of element on the DOM or in your HTML page if you want to call it that and let us drag it around the screen. And I think the best way to talk about this is actually just to view it. I'm going to jump over here to CodePen where I've created a very small demonstration of that. So here we are in CodePen, and as you can see, I just have 12 rods on the stage. And I wanted to be able to drag those around for a game. So by using the GreenSock's plugin Draggable, I'm able to grab any one of these rods and pull them around. And notice if I stack them on top of each other how the 7 is on top of the 11. Well, when I go and click on the 11, GreenSock has done a great job of allowing it to jump in front of the other element and let us move this around. That is what we're going to learn in this module, and I think you're going to find that it's very easy to implement and there's a lot of things that you can do with it. Let's go ahead and get started. Project Creation and Importing GSAP Now that we know what GreenSock's Draggable will do, let's go ahead and get started on creating our own. So in the course files for this module, you'll find a project called start-dragging in there. And I'm going to go over how I laid it out and what we are going to do to it. So let's first look at what this site or what this web page is going to look at for our project. So this is basically what we're going to create. We have our GreenSock title up here at the top. Then we have our icons over here. And these are what we're going to be dragging around on the stage. So we're going to look at how to drag those strictly in a horizontal access and in a vertical access. And then by default, what they do. So let's jump back over to the code and get started and look at how I set this whole thing up. You'll notice that I brought in my mainTitle here. This is basically the same thing I've done in the other projects throughout this course. Then I start creating my grid. Now you'll notice that I have a container wrapper that wraps everything, and then I put my grid in there. And then I start creating the gridRows. You'll notice that all the images are surrounded by a section. You can use a div if you want to. It doesn't matter. I just use a section and then this one. Then I have my gridBox. And then I use gridBoxImage, and then moveAble. And there's going to be a reason why we use these two. Now gridBoxImage is important because we want to position it relative. So you can go through this CSS. It's pretty much the same as far as the fonts and everything goes and the container wrapper. And then we get down here to the images, and the gridBoxImage we really need to position relative. You always want to set your position on anything that you want to drag. It's very important that you do this. And we can go down through the rest. And down here at the very bottom, this is just where I set the rounded radius on each one of my corners. So let's go in talking about what we need to get this project running. Over in my index---I'm going to squeeze this down just a little bit so we can see more of our code. Over here you'll notice I brought in jQuery. And then we have our app.js file. Now we brought in jQuery using a CDN. And our app.js file is right here. I don't have anything in there yet, but we soon will. The first thing we need to do is go get the libraries and plugin and utilities that we need from GreenSock to get this thing going. Let's go to the GreenSock website. Here we are at the GreenSock website, and you'll notice that there's this Download GSAP, which I've showed you multiple times throughout the other modules. Just click on that, and it's going to bring up our download. Now you can download the zip or you can go to GitHub if you would like. I'm going to do everything from right here in this window. Click on customize so I can go get the right utilities and right files I need to get this thing to drag. And you'll notice by default, it's set to TweenLite and CSS. You may have something else if you've been there and continue on from the other modules. I'm going to go ahead and click on TweenMax. Then one thing that we notice is that it, of course, brought in the CSS plugins, which I've covered before. But we need to add the extras. And one thing is going to be this Draggable utility. Now you'll notice that---and the reason why I'm calling it a utility is you'll notice in our path up here, it's inside the utils folder. So if you download the whole project itself from GreenSock or go to the GitHub, the Draggable file is inside of the utils file. I just wanted to make sure that you knew that. So I'm going to go ahead and copy both of these script tags. And we can go ahead and close the website there. And let's jump back over to our project. So I'm going to click into my index. And we want to paste these two script tags right underneath our jQuery. So you have jQuery here, then you have the two GreenSock's. Now make sure that you put them in the correct order. jQuery goes first, then TweenMax, Draggable, and our app.js file. This is very important as I've discussed in the other modules about the hierarchy of how you should bring in your JavaScript files. Now by default, GreenSock lays them out inside their website there for you in the correct order. So, the next thing we need to do is set up our app.js file. Now you can go ahead and set up like a $(document).ready if you would like and get everything going, which we can, so just to make sure that nothing's draggable. But in this very, very simple project, we probably wouldn't need to do that. But just because we've been doing a lot in the other modules, I'm going to go ahead and do that for us. So we just set up $(document).ready, and I just like to do this a little bit just to make sure that everything is loaded or read on our screen first, doesn't throw any errors. Then what I'm going to do is I'm going to put init project, and you can put call a function or whatever you want. And this time, I'm going to put the function up here at the top. So function, and we're going to put the name up here of initProject and put a little space there. And inside of initProject, that's where we're going to create our Draggable and set our grid for our project. Now, like I said before in our index.html, we have the grid laid out. And I called this grid Container. And we need to let this know, or we need to let the Draggable know what or gridContainer is so it doesn't go outside of it. You don't want our items just flying off our stage anywhere. We want to contain it to a certain area. And for us, that's going to be this gridContainer. Now if you're confused about what the gridContainer is, I'm going to jump over to the HTML real quick, and the gridContainer is all the outside lines right here. That's what we're going to consider the gridContainer. So now that you kind of understand what the gridContainer is, let's go back and set the gridContainer or basically the constraints for our objects not to go outside of this. So I'm going to jump into our app.js. And now that we're inside of our init project, we're going to create a variable. And I'm going to call this gridContainer. Now this is just a variable name. We're not doing anything crazy with it. And I'm just going to call it out using jQuery. And it's a class, so we're just going to call this gridContainer. And that's all we're doing. Basically, we're setting this variable gridContainer to our class gridContainer. The next thing we want to do is create our icons to be draggable. Now this is so simple. GreenSock has made it very simple for us just to apply dragging to any object on the screen. And the way we do that is just like the plugin that you saw or the utility that you saw, it was called Draggable, the same way we've been doing TweenMax or TweenLite, you start off and you just put Draggable here. And we're going to do create, so Draggable.create, and then we're going to call out what we want to move. So I'm going to call moveAble. Now what is moveAble? So let's jump over to our index and see which ones are moveable. Go right here into our index file, and you'll notice that the class moveAble has been applied to the section where there is an image located. So here's one here. Then we jump down, and here's one. And we're going to jump down again, and there's another image. So we got four images and four moveable classes. So jump back over to our app.js. So that's what we're doing. We're saying apply a dragging instance on top of every class that has moveAble in it. The next thing I want to do just like the rest of the syntax for GreenSock, we put a comma. Except for this one just takes a bunch of properties. Instead of creating time and everything like that, we need to add properties to it. So we've created the Draggable. We want to set the bounds, and this is where the gridContainer comes in. So we're going to click bounds, and then we're just going to put gridContainer here. Let's put in an edgeResistance here. We'll make it 0.65. And you'll see what this does here in just a second. But basically it tells us how far the edge is for our draggables. Let's jump back over to our website or our project and see what's happened to all of those images on our page. So now I've refreshed the page, and you'll notice that over every image, we now have a draggable kind of icon or a cursor. So it looks like a four, mine looks like a four-arrow dragging. And you'll notice that I can drag these items anywhere I want to know. What's really nice is just like I said in the intro that when we click on another object, they bring it forward in the index. So I can create and just bring the superman above the weightlifter. Let's bring over the toolbox in from of all these guys and move him over a little bit. And you'll notice that these keep jumping in front of each other. It's really nice that it does that. So we've set this up. We've got our items dragging. But now we need to add some more properties to them. We just don't want them to be dragging everywhere on the page. So in the next section, we're going to cover out how we can constrain these to a certain x and y value. Let's go get started on that. Adding Properties to the Draggable Object So in the last section, we finally got our Draggable created, and we can move our icons around in our game board. We're now going to look at adding some more properties to this to make it change. One thing I want to talk about first is this edgeResistance. Now I mentioned that it stopped you from going outside the bounds or the game board. But it's a little bit different. What that does is allow the object, whatever you're creating the Draggable on, it allows that object to move so far outside of the bounds. Now this goes from 0 to 1. Right now we have it set at 0.65. Let's go look at what it looks like on the game board itself. So here we are, and you'll notice that I can drag our little superman around. And you'll notice that we can drag him outside the bounds a little bit. Now he starts slowing down a little bit, and you'll notice my cursor starts going off of him, but he's only allowed to go so far. So same way with the top and the bottom here. So he starts really slowing down when he goes outside. Now if we use 0, it can really go outside the bounds. But if we use a 1, let's see what happens. I'm going to jump back over to the code. And here you'll notice I'm going to set this to a 1. So a 1 would not allow us to move any object outside of the bounds that we gave it. In our case, it was the gridContainer. So let's go back and we'll look at see what happens. Now I'm going to refresh this. And you'll notice now that he cannot move outside of that gridContainer at all. Now you'll notice there's a little gap here, but our image actually comes all the way to the outside here. So, we have literally stuck him to the bounds of that gridContainer. Now if our image was right on the edge of him and this cape, he would literally go right up next to the edge. Now this might be the way you want it to work if you're playing a game that you don't your objects to move outside at all. But sometimes when you're throwing objects, then you may want them to seem like, I'm going outside and then come back. So we'll get into ThrowProps here in a little bit. So that is one thing that we want to look at. The other one is the dragResistance. So if you ever notice how when somebody's dragging something, if you wanted to move with the mouse, by default, it moves just as fast as the mouse. So as you can see as long as we stay in here, this will move as fast as our mouse moves. Let's see what happens if we add a little drag to it. I'm going to jump back over to the code. And, here, we can add dragResistance by just adding this property. And this'll go from a number between 0 and 1 as well. Now, 1 won't allow it to be dragged at all. 75% applies a lot of resistance. So let's just see what 75 does. So we're going to add 75 in there, and I'm going to jump back over, and we'll take a look at what this looks like here. I'm going to refresh this page. And notice how I'm dragging him, but he's no longer staying with the cursor at all. So he really is struggling. So there's a lot of dragResistance. Now if we go to 1, it will not let it drag at all. And if you go to 0, it'll let it drag just like normal. So what could you use this for? If you want to simulate something really struggling along, so if you're supposed to be dragging, for instance, a car and it weighs a ton, it's going to be hard to drag. So that'd be a good example for that. Now, here's something else. We're going to change a couple of things here. You'll notice that by default, we can move this up, down, side to side. Also, our cursor is set in the move icon or the move cursor. Well, let's say that we can change that. So we want to change that cursor to be just like a normal pointer, and we also want to only allow the superman here to drag in the x position or the x axis. So let's go and make those two changes. So here we are just like we have added the other properties, we're going to add cursor, and the only thing we're going to put here is pointer. Now you'll notice that pointer is now a string, so that's important. You need to put that in a string. And the next thing is we want to put in---we can lock the axis to true, or we just put in type, and you'll notice that I had type down here to begin with, so I'm going to move this over. And we can literally just specify the x type. So I'm going to save that, go over and take a look at it. I'm going to refresh this page. And you'll notice now that when we hover over the superman, he is now just a normal pointer. It's no longer the move icon. So these are all little things that you can apply to the draggable object. And you'll notice now that he can only be moved in the x axis, no longer in the y. Now you can do these with the other icons as well. Or maybe you want to drag him along to a certain point and then change him to get to the y axis. However you want to change your code, you can add certain properties. GreenSock has great documentation about what you can add, the bounds, how to lock the axis, that type of thing. So it will do you a great bit of knowledge to go look at the GreenSock documentation. Now, remember, the Draggable is a utility. So I'm going to jump back over to the code and show you that. So how do I know it's a utility? Again, like in the last section, we scroll down and we look--I'm going to make this a little narrower here--we look and Draggable is in the utilities. So that's one thing that we want to make sure that you have in there. We are also going to look at the ThrowProps in the next section. Now this will allow us to throw our objects and let them---it actually adds physics to them to make it look like they're flying across a stage, and it stays inbounds and everything. And we're going to look at that in the next section. After showing you all the properties and then the ThrowProps, we are actually going to develop a small, little game that when you drop it on another image, it actually locks into place. That'll be the final section of this module. So let's get started learning what ThrowProps can do for us. Adding ThrowProps to Your Draggable In this section, I want to talk about ThrowProps and what it can do for us. We've been talking about the Draggable instance and what properties we can add and how much resistance that we can put on it and just all those properties. And GreenSock's documentation does a great job of telling you everything that it does. And we've only covered just a little. I want to keep these kind of simple just to show you the syntax and how to use everything. I think that's important just to figure out how to get this stuff to basically look good in your code and actually just implement something simple first off. So ThrowProps is very easy, and what is it? It's basically just a momentum-based animation. It almost puts physics on your element to easily move them across the browser or your game or whatever you're creating. So the first thing I want to do just to show you what this does or to even talk through it is I'm going to remove this dragResistance out of our project. Now that we got that out, you'll notice that our type is still left in the x value, so it's only going to go in the horizontal direction. And let's jump over to our browser so I can talk you through what ThrowProps will do. So as you can see here, we have the same setup that we did before. Now with the drag resistance off, we should be able to move this superman pretty easy, and all of our elements. Now it will not go up or down, just in the x direction. So what ThrowProps will do is if I click and try to just throw this element right here, it doesn't do anything. It just sticks and stops where we let off the mouse cursor. One thing that ThrowProps does is lets us throw or flick and element across the stage, and it moves really smooth and slowly comes to a stop. Now you can change a lot of that, but it will stay in the bounds that you tell it to. It will go outside of the bounds and come in as we will soon learn, and it still works on the edgeResistance that we have. So let's look at how to implement this into our project and also some of the settings that we can change. So here we are back in our project, and I want to jump over to the index page real quick. Now I must tell you that ThrowProps from GreenSock is a paid feature. And if you go to the documentation in the website, you will see that the requirement says that you have to have a Club GreenSock Membership in order to get this plugin. Now, I must stress that I do not include this plugin inside of this project or this starting project. The reason why is I truly respect GreenSock and what they've done, and I don't want to give their product away. If you look at our project, you'll notice that I have brought all of GreenSock's utilities and libraries in using the CDN, which is the content delivery network. ThrowProps is brought in in my vendor directory, which I've set up over here, and I've included that. Now I am a GreenSock member, and I would highly recommend becoming a member if you're going to use this a lot. But I just want to stress that this is a paid version. And I do not include this into a project. But this will show you how to implement it. Now, let's move on now that we've covered that. So just like all the other scripts, you have to bring it in. And I brought mine in right below my Draggable instance and included it into my vendor directory. Now I'm going to switch back over to the app.js and show you how to implement it. It's really, really easy. All you do is just like the rest of all the properties, all you have to put is throw--and notice the CamelCase--throwProps equals true. Now since this is the last property, we don't have to put a comma there. So save it, and let's jump over and take a look and see what happens. Now you'll notice everything's reset. I refreshed the page. I'm going to grab a hold of superman, and I'm just going to throw him real quick. And you'll notice that he just moves really nice. And when you throw him, he just keeps going and slowly stops. Now one of the reasons that he doesn't move really far when you throw him is because we still have a very, very high edge resistance. And if you remember from the last section, edge resistance talks about how the element when it gets close to the edge, it starts to slow down so it can keep it within those bounds. And if you'll notice if I get really close here, he will not throw outside of that edge resistance at all. Let's look and see how we can change that. Now I'm back here in my project, and I want to just change this edgeResistance. And I like 0.65, and that's usually the examples that you see in GreenSock's examples they use on CodePen. But you can change that to whatever you want. We can lower it down. Remember, that's a value from 0 to 1. I'm going to lower it down to 0.65. It does a pretty good job of coming back inside the bounds. I'm going to go back to the browser, refresh, and let's take a look at this. Now you'll see that I refreshed the page. And now when I grab a hold of superman and throw him, he'll go outside of the bounds a little bit. Notice how I can drag him outside and let him go. But he always snaps back in. You'll notice I really threw him hard on that one, and he always comes back no matter where he's at. It's really cool! GreenSock's done a great job of animating and having the momentum go as far and as hard as you throw it, and it always brings it back. Now this works in the x and y position as well. Go over and change that in your project. I'm just going to take out this x and y, or you can add the y in there, whichever one you'd like. Remember, by default it's always x and y. So you could take this out. Go back and take a look at it. So now you'll see that I can drag superman anywhere I want, and I can throw him anywhere I want. So I think you get a better representation of how the ThrowProps works by doing x and y. So now I can really throw him. And you can throw all the other elements as well. Notice how they do a nice physics. See how they're supposed to move. Go outside. Now you can add ThrowProps on any element just like what we did in the earlier modules of adding an animation to one element. You can do the same thing with ThrowProps. If you go to the documentation, it'll show you a lot of things that you can do. You can put easing on it. And notice how, like I just said, that you can add ThrowProps to any object just like TweenLite.to(throwProps). But you have to bring in the plugin inside the scripts. So, they can do ThrowProps x and y. And you can add the velocity for each property. So you'll notice how the x and the y---so you can add that to it. And that way, it moves and you can throw things a little bit. So you can get velocity. Basically, if you click on any of these methods, it'll tell you how to use them and what they do. Now, again, you can add easing to the ThrowProps plugin if you would like. In our case, we would just add it to the Draggable instance. And, therefore, it would add it to our ThrowProps for each one of those elements. You'll notice if we go back to the top of the ThrowProps plugin and they start showing you examples, they will actually add the ease to the end of this just like what we did in the other modules. So very, very easy to implement into our Draggable. Now you can actually do ThrowProps, just like what they're doing here, inside of just TweenLite or TweenMax, any of them. So, it isn't just for Draggable. I'm just showing you the ThrowProps inside of Draggable. So all it is is really just the CamelCase throwProps, and then you can add all the properties and values to it. And just like what they said here, you can pass the properties to basically any element. In the next module, I'm going to create a game showing you how to use everything that we've learned so far in these modules. Let's get started in creating our game. Draggable Wrap Up Let's wrap up GreenSock's Draggable. So during this module, we learned how to import the GreenSock Draggable, which is a utility of GreenSock. And you can find that in the utils folder when you download the source code. There are some things that we have to remember when we implement the Draggable. One is the best thing to do is have a boundary. So set the boundary for your draggable objects to stay in. So, remember, we don't want those objects to go outside this boundary, and if they do, we want them to come back. GreenSock's done a great job of allowing you to throw them outside the boundary, and they always come back into the set boundary. So the best practice is to have a boundary for your draggable objects. The next thing is, in your JavaScript file, is to use Draggable.create, and then you can use jQuery syntax to target those objects. What we used through the module was just a basic class, and we targeted those elements on the site. Another thing is that you can add a lot of properties. That's one thing that we've covered throughout this module is how to add edgeResistance and the dragResistance and all of those different properties that we can add to Draggable. When we make the game, we're going to use a lot of other properties inside there as well. Last but not least, if you get stuck, use GreenSock's documentation. It's great. It has a lot of information for you, and it shows you examples, which I think is better than a lot of other documentation out there. So I hope this module helped you learn how to implement Draggable in a very easy and precise manner. In the next module, we're going to start creating a game that's going to use everything we've learned throughout this course and implement that into our JavaScript. Let's go create the game. Creating a Matching Game Introduction to the Game In this module, we are going to learn how to create an HTML game. We are going to take GreenSock's library and create a matching game. We are going to learn how to drag an object from the left-hand side and match it to an object that's on the right-hand side. If it matches, then it's going to line up and disappear off the stage. If it doesn't match, it's going to go back to its home position. Another thing that we're going to take a look at is another feature that GreenSock offers that's called SplitText. Now we're not going to spend a lot of time on this, but I wanted to show you what SplitText actually is. Now this is part of the premium package, so you have to become a Club GreenSock member. We're going to take all the tools that we've learned throughout all the other previous modules, so that includes timelines, TweenLite, TweenMax, how to do onComplete functions, the dragging, all of those features we're going to use to create this game. We're also going to learn how to pass parameters from one tween to another function. So what happens when your function is complete and you need to pass some parameters to the next one? We're going to learn how to do that. And, finally, we're going to learn how to find coordinates for a target. A lot of times this gets a little bit tricky in finding out where it needs to be and to line up the objects. And, of course, game procedures--time, how many objects, just those things that are not part of the course, but we need to do just to figure out the game. So let's actually go and view what this game is. Here we are in the game. And you'll notice that when we refresh and the game starts, the title's going to come in from the left. That's the SplitText. All the objects come onto the stage. And then we can actually drag one of these images over. And if it matches, it tells us that it's correct and disappears. If it doesn't match, it's going to say Try Again, and the object goes back to its home position. Now once you've finished the game, we actually start to pull up the game complete. So as we match all of these, it's going show up and say You Win! So that's the entire matching game. Let's go get started creating this. Setting up the Game Let's get started creating our game. So as you can see, I'm in the drag-game-starter project. And I'm going to cover the layout of the HTML and some CSS and then talk about how to start programming our app.js file. Now, it's just a standard HTML. I'm not doing anything crazy here. I brought in a style.css file. I have a content-wrapper, which basically is a div that surrounds our entire game. The background div right here is basically where our Notepad and the paint and everything else is inside of there. It's also where our GreenSock title is going to be. And that is above our gameBoard. Now our gameBoard is actually a div that holds our instructions and all of the draggable objects or elements and the target elements that you're going to drop on. Now I've put all the elements for the game inside of gameBoard because it makes it easier to match and set the x and y values later on, as you'll see. You can also animate the instructions in, as we are going to do, the title later on. Moving on down past the drop targets, we have a modal that says You Win! This is what pops up at the end of the game when you win the game. And we have a couple of extra divs called Try Again and Correct, and those actually come onto the stage and tell you if you missed the target or you did not match correctly and one if you did. Now, also, let's talk about our script tags. Now just like in the prior modules, we've talked about bringing jQuery in through a CDN, just like what we have. This SplitText that I have included in my project that you're seeing called SplitText here is a paid version so you need to be a Club GreenSock, and it's almost like our ThrowProps in the last module. But this one is called SplitText, and it actually will split all of our characters up and let us animate each character. Now I'm not going to include SplitText in our starting folder because this is a paid version, and I don't want to take that away from GreenSock at all. But the next two script tags are very familiar. I'm bringing in Draggable and TweenMax, which you can get from the GreenSock website. And last but not least is our app.js, which is empty by the way. Let's talk about our CSS for just a brief second. You'll notice that in our correct and in our tryAgain, I have set the visibility to hidden and opacity to 0. And the reason why is we're going to use a property in GreenSock called autoAlpha. And, basically, what that does is changes the visibility and the opacity together. So you have to set those two properties right there in order to get the autoAlpha to work. That's the reason why these are both set. Next you'll notice my positioning of all the elements that drag and the drop targets. They're all positioned absolute. I've set the right and the left properties and the top. You can do this other ways. This is just the way I chose to do it. Now GreenSock says that you have to have the position set, and we've talked about this in previous modules. So this is a good practice to get into of setting the position whether it's absolute or relative. It's a good habit to get into. Now let's get started with our app.js. You'll notice here that it's blank, and we need to start writing some variables inside of our app.js. So I'm going to start off with var, and I'm going to do a shorthand here, which basically just saves me from writing var several times. I'm going to start covering the title text and splitting that up so we can animate it. And I'm going to call that one titleText, and it's going to be equal to our class over in our HTML. But, first, I need to create a new SplitText. Now, remember, this is the paid version of GreenSock. And here I'm just passing in the class name. So now we actually have a SplitText in a variable called titleText. And, basically, what that did was busted up all of our characters and put them in individual divs. Next, we are going to create a timeline, which we've also talked about in previous modules. And this is going to be a new TimelineLite. And then next we are going to create the number of words that we have. Now, this is words, it could be letters, I just chose words right here. Letters would probably be a more practical way. But we're going to use titleText.chars.length. So that gets the number of letters. Next, we're going to create our game boundary, so our gameContainer in this instance. And, here, we start using the jQuery syntax, and it's going to be the gameBoard that's over in our HTML. And this could be found in our module on the Draggable. Next, we're going to get all of our dropTargets. And, again, we're using jQuery, and we're going to get the target. So, basically, this is creating an array. So we're going to go through and get every element that has the class of target, and we're going to put it in dropTarget. So that's actually an array. Then, next, we're going to get into the game mechanics a little bit. We're going to do totalTargets. Now we know that there're six, but if you wanted to make this a little bit more dynamic, you could use dropTargets.length, and then you could just keep adding targets. And, finally, we're going to create one totalHit. And that's equal to 0. And this is going to be able to tell us when we've actually hit each target, so we're going to keep track of that. And when total hits equals total targets, the game is over. Now we need to animate this title in and make it look like the game board's being loaded. So, first off, we're going to write a function called initTitle. And we're going to loop through the number of words or the number of letters, whatever you called it here. So we're just going to do just a basic for loop, and that's i is equal to 0. Here we're going to do i is less than the number of words or letters, whichever one you chose. And then we're going to just increment the i, so i++. Then we're going to go in and start animating each letter. So we're going to do timeline from (tl.from) and then the element that we want to do, which is our titleText.chars and each one. We're going to animate those in a half a second. And let's go ahead and give it all the properties that we want to do. We want to do a force3D, now you can read on GreenSock's website about this. This basically forces the GPU to process this information a little faster. Opacity from 0. We're going to set the x to 500, or -500 actually. We're going to transform the origin of this from 0 to 50%. We're going to add an ease, now you do not have to add an ease if you don't want to. We're going to put a Back.easeOut. And that's the last property there. And then we're going to add a Math.random on this timeline here. So this will animate our title into our game. Now last but not least, we actually have to call the initTitle. So let's come down here to the very bottom and call initTitle. So if we go run this in our browser, you should see all of your elements still in the game showing. And then your title should animate in. Let's go take a look at that. Here we are in our game. And I'm going to refresh the page, and you'll notice that all of our characters bounce in. So I keep refreshing this, and you'll notice that the characters come in. If you don't want them to show up when you refresh the page, set the opacity to 0, and then you can animate to. But this is just basically how to animate the title in. So that's our HTML layout, CSS, and getting the title to come in. Let's move on to getting all of our elements to come onto our stage and getting the game started. Animating the Game Pieces and Adding Text Shadow Now that we have our title loading on our page, we need to get the other elements to move onto the page. So let's start by setting our CSS the way it should be. Now we're going to animate each one of those on individually. We want them to stagger so it looks like it comes on, and we can take a look at this complete game of what it's supposed to look like. So I'm going to refresh this completely. You notice our title comes in, and each one of those elements comes in on the stage at their own time. How do we do that? Well, first, I don't need to go over and do anything in our CSS. I want to do this all using GreenSock Set property or Set function. So let's go over and do that really quick. So here I am. I'm in my app.js. And we've already created the title and all the variables. So how do we do a set? Now one thing that I want to happen is right when this JavaScript file is loaded, I need to set a few things. And one of those things is we need to set the properties to our image. Now what do you mean 'image?' If you come back to our index page here, and we go up to all of our elements, so the draggable ones and the target drops, they all have a class of image. So we're going to target that image class right here. So we're going to come back to our app.js, and we're going to do this. We talked about this in other modules. We're going to do a TweenMax.set. Here's we're going to target the image class. Now we do not have to put any time. There's no time on this. We're just setting a property. And inside, we're going to set the scale to 0. So when those first are loaded onto the screen, we want those to basically have no width or height at all. And we're going to set the opacity down to 0 as well. Now, you'll notice that the opacity/scale is 0 so when we go back to our game, you will not be able to see these. Let's go back and check it out. Here I am. I'm going to refresh the browser. And you'll notice that the title comes in, but the elements do not come in. So how do we get those to actually animate onto the stage? Well, we're going to jump back over to our code and take a look at that. So, we know that our title comes in and animates onto the stage. And then we want all of our elements to jump on or all of our game assets to come onto the stage next. And when that happens is after the title comes into our game. We're going to do an onComplete in our timeline. Now, basically, as soon as all these letters animate onto the stage, this onComplete is going to call whatever function we pass into it. And we're going to call a function called loadGameBoard. Now we haven't written this function yet, but we're getting ready to. And we want to put that below initTitle. So we're going to do a function, and we're going to call this loadGameBoard. And put that in there. Now you'll notice that this highlighted so we have a function. And inside of loadGameBoard, we need to do a couple of things. And, basically, that's how to stagger all of those elements onto our stage. So let's go in here, and we're going to do a TweenMax, and we're going to do a staggerTo. And which ones do we want to target? And those are the images because we want all of those to come onto the stage. We want them to come on in 0.2 seconds. We're going to set the opacity to 1. Remember, up above, we set that to 0 using TweenMax. We're going to take the scale back to 1. Now, remember, this is only from 0 to 1 on scale, 1 being 100% of its normal height and width. Then we're going to add an ease to it. And we want a Back.easeOut. We're going to do a force3D on this as well. And then we need to add (let me get rid of that comma there), next we need to add the basic stagger time in between each one. And, basically, for this we want 0.1. So now you can see we're back over on our game board. I'm going to refresh the browser. And now you'll notice we get a nice intro of all of our game pieces, and they bounce in using that ease. And they all stagger. Now you can play around with the settings if you want, change the stagger between time and how long it takes each one to load in to get the game to feel the way you want. Now the title up there at the top looks kind of boring. It's just the green. It kind of blends into the background. Using GreenSock's set, we can add some things to that as well. So, let's go back and add those. Now let's go ahead and set the properties to that title using TweenMax.set. And we're going to target the title. And, remember, there's no time here, so we're just going to start adding our properties that you want. Now if you want to rotate x and y, you might want to set the perspective. So I'm just going to show you how to set that real quick. And we're going to set ours to 400. Then I want to add the textShadow. And, basically, what this is going to do is add a drop shadow to our file there, so we're going to add that, and we're going to put it at 2 px and 2 px. I missed an x there, don't forget that. We're going to do 15 px next, and we're going to do an RGBA, and we want to do a 0. Basically, we're going to set this to black and then do it at about 0.6. Don't forget your ending parenthesis there. We're going to save that. And we're going to go back and check out the title and see what it looks like now. Now that we're here, we're going to refresh the page. You'll notice that we know have a drop shadow put on our title. So we've got the title coming in, we've got a drop shadow put on it. You've got the elements coming in. And if you want to style at all the instructions, you can basically do the same thing. I'm going to copy this. And instead of title, we can put instructions on here. And if you don't know what that instruction is, it's the class name for what is on here in our class name instruction. So we're targeting instruction. And, basically, we're not going to do anything crazy with that. But maybe we want to give it a drop shadow. So let's go check it out. Refresh, and you'll notice that now our text on our page now has a drop shadow. it's a little bit big, probably a little bit too big, but you can play around with it just to get to see what you want it to do. I'm going to take that off just because it's kind of distracting to me, and then we'll continue on with the game. So we're gone with that. We've got our drop shadow, our text shadow onto our title. We've got the title coming in. We've got the game board being loaded. But there're a couple of things we need to do after that, and one of those is add a Draggable instance to all of our game pieces. We need to do an initDraggableItem. Here's where we're going to add a function for initDraggable. And, basically, this is just going to add a GreenSock's Draggable property to all of our elements on our stage. Now we're going to continue writing this function for our Draggable in the next section because there're a lot of properties that we are going to start adding inside of there. So let's jump over to the next section and start creating our drag on all of our elements. Add Dragging to Elements So now that we've added our function, the initDraggableItem, we need to apply the dragging instance on all of our elements that we want to be able to drag. So in our instance, it's the six that are on the left side of the page. Like the previous module on Draggable, we're going to create the Draggable instance. So we're going to start here on line 29, and we're going to call Draggable. And we're going to do a create. And the first thing that you need to do is pass in the class name that you want to be able to drag. In our instance, it's dragItem. Now if you're not sure where I got dragItem, it's like the other elements that we've been calling in TweenMax. We go to our index page, and if you look in our elements here, we have a class name of dragItem. And it's only applied to the six items that we want dragged. So it's there, here, and as we move on down, you'll notice that the target drops in here do not have a class name of dragItem. So they will not have a dragging instance placed on them. Let's go back and finish up our drag. So that's the reason why we're calling dragItem. Now you'll notice in dragItem, we don't have a time in there either because you're dragging them around so there's no time to animate. We just have a lot of properties to place on those. One is the bounds, and that is the gameContainer variable that we created up at the very top (scroll up here), and it's the gameBoard. The next property is the edgeResistance, and this one we're just going to leave at 0.65. And like I mentioned, that's usually the default value for that. The next is we're going to add an onDragEnd, and we're going to write a function in there. And right now, we just want to do a console and drag. We're just going to put that in there really quick. And that is when you're done dragging your element around, it should print out to the console 'end drag.' The reason behind end drag is that's actually when we're going to do a check to see if our draggable item is landing on top of a target or a drop target. So that's very important that we have that in there. The other one is---and we're going to place this actually right up here, get rid of that bounds that I had in there. We're going to do another one called onPress. And, again, we're going to put an anonymous function in here. Let me put a comma after this one right here so we can move on. And we're going to put a console.log, and we're going to put Pressed. Now what Pressed will do is whenever you press exactly when you start to drag or when you actually press on it for the first time, we want it to record a certain value. And in our case, that's going to be the x and y. So it's where it starts off at. So, when we go back over and we test our game at this point, they all should be able to have the cursor that looks like the four arrows on it. That'll show that there is a Draggable instance on those elements. It shouldn't allow us to go outside the game container. It should slow down, or when it gets closer to the edge, it'll be really slow and not want to go outside of that edge. Also when we actually press on it the first time in our console, you should actually see Pressed. And then when we're done dragging, it should say end drag. Let's go check this and see if we've done it correctly. So here I am back in our game. And you'll notice that as soon as I refresh this, the title's going to come in, all of our elements are going to load. And now we need to find out if there's a Draggable instance on these. So I'm going to hover over one of these, and you'll notice there is, so we can drag this around a little bit. And now we need to find out if we are getting those console logs. So the way I'm going to do this, I'm in Chrome. Firefox may work different, or Safari or whatever you're working in. But I'm going to right-click, and I'm going to hit Inspect. And here's our console or our developer tools. I'm going to hit Console here. And you'll notice it says Pressed and end drag already because we've already clicked on one of those. Let me go ahead and move another one, and you'll notice that it's Pressed. And here we can just drag it anywhere, and now we have an end drag. So our console.log is working correctly. This should work on every instance, which it is. So it definitely tracks where it's pressed, and it definitely tracks when it ends dragging. And that's what we want because when we want to drop it on a target, we need to know where it's at and what target it lands on. When we press it, we need to find out the home position, so when you don't land on a target, it goes back to the original x and y value. Now, in the next module, we're going to finish up this game and add to the Draggable instance because it really gets complicated in some of the game mechanics. Let's move onto the next module and finish up this game. Creating a Matching Game Part 2 ID's and Adding Important Variables In this module, we're going to wrap up the matching game and figure out what we can do to use GreenSock to help us drag and match these items together. Now we're using the onPress and the onDragEnd, and these two are going to be the most important part of this game. But, first, we need to learn how I set my Id's up in my HTML. Let's jump over and take a look at that. Now you're going to notice that up here in my items that I can drag around, these six items, I have an Id of cloud and cloudTransfer. Down here in my drop targets what I did was I took the Id from up here, for instance cloud, moved it to the Id down here in the bottom into our target, and put cloudDrop. So we took this Id and just basically added the word Drop to it. And the Drop should be a capital D so they all look the same. So it's cloudDrop, cloudTransferDrop, cloudUploadDrop. So, basically, the Id up here just take that and put a Drop on the end, and that's the Id down here. There's a reason behind that because these two are going to have to meet or match here in a minute for us to drop them on top of each other. Let's go figure out how we're going to set up some of the most important variables and properties in our js file. Let's set up the onPress first. A few things that we need to find out is basically where we start at. So I'm going to put this.startX = this.x. Now, basically, what I did here, and I love this about JavaScript, was that we just took and placed this new property of startX into this. And then we recorded the current x value and shoved it into that startX. We're going to do the same thing, but we're going to do that with the y value. So that's what we've got going on right here. We took the startX, created basically a new variable, startX, startY, stored them into this dragging instance, and we're getting its x and y. There're a couple of other ones that we need to get. We're going to do this., we're going to call it offsetTop. And then we're going to use this.startY. Now, remember, I reversed these just so we can talk about this. Y is up and down or top and bottom. X is left and right. So don't forget that. So we're going to do this.startY -, we're going to get into jQuery syntax methods here, $(this.target). Now why did I put target? Because this is actually referring to GreenSock's dragging instance that you're dragging around. And by putting target, you're actually targeting the div that it's in or the span that it's in or whatever. The next thing that we need to do is get the position. Now if you've never looked at this in jQuery, basically what this is is you're getting the top and left values of where it's at from its parent. So, for instance, if this cloud was 200 px in on the left and 100 px down on the right or 100 px down from the top, basically the offsetTop would now be 100. And then you take the starting x or starting y, in this case startY is 0. It would be -100. If you don't understand this logic, just know that this is getting the position it's at within its parent. This is getting the position at when you start and where it's at relative to the div, which is normally 0,0. We're going to duplicate this line, and we're basically going to change this to the left. I know that was a little bit confusing. But it'll make more sense here in just a little bit. So now we have where it's at on the top and the left. So, this kind of resets it back to 0 in the parent container. Now let's figure out what we can do with that. So when you're done dragging this around, we're going to do TweenMax.to. We're going to tween this---and don't forget to put target because that's the div. Then we need to pic the time, let's just say it's 0.5. And then we need to pass in what we're going to animate. And in our case, we're going to animate the y, and we're going to move it to this.startX. I said y, I meant x. Here, we're going to do y actually. So now when we drag this object around, when we stop dragging, it's going to move back to the starting x and starting y or basically the home position. Let's see what happens. Let's refresh the browser and see. Game loads in. So now we can drag these around, and all of them should go back to their home position, and that's because we're not matching anything yet, we're just setting some variables of the starting x and starting y. Now, jumping over to our code, you'll notice that the x and the y are going back to the startX and startY. We're not using the offset. As you can see here, we're using startX and startY. So now we've got some basic variables set up. Now we need to get into how do we match these? So in the next section, we're going to set up our matching--- basically, how we match everything on the dragEnd to tell if we are actually landing on something or not. Let's move to the next section and check out how to match our elements. Creating the Hit Test Now that we have our dragging item going back to its home position, and we have some of those nice properties stored, the starting x and y, let's go ahead and get the Id's and start checking for a hit test. Now, again, it's important to remember how the Id's are set up. So, we have an Id of cloud here in our dragging item, and then the drop target areas all have the word Drop after them. So cloud and then cloudDrop, cloudTransfer, cloudTransferDrop. So just remember that. Now over here, we need to get the dragging item's Id. So in order to do that, we're going to do var dragID = this.target.id. Now this will never match the target Id. The reason why is because the dragging item's Id is only cloud. In order to get it to match the target, which is cloudDrop, we need to concatenate the word Drop onto the end of this. So now that we have our Id, we need to loop through this target when we end, we need to loop through all the targets and see if it hits anything. And in order to do that, we're going to use jQuery's each method, we're going to load in the dropTargets, and we're going to write the function. This has the index and then spot. Spot here is basically the drop target for me. And now we're going through all of these. Now I'm going to show you a little issue here in a minute that I found with animating our dragging items back within a jQuery method. And it's nothing big. But you just need to be aware of it. So in here, every time we loop through a target, we need to get its Id. So we're going to do a spotID, and that's going to be equal to spot.id, very easy. Now that we have the spotID--let me go ahead and arrange that code a little bit better--and now that we have the spotID, we can actually do a couple of checks. First off, we want to make sure that the spotID matches the dragID. So if they do, we want to go into this if statement. Now we need to do another if statement inside of there. And GreenSock has given us a nice method called a hit test. Now what does this hit test do? Well, we're going to say this.hitTest. Now this being the dragging item, and then it allows us to throw in an element that we want to check to see if it hit. In our case, that would be spot. And then it even gives us how much do we want to cover of that area? So we want to try 10%. So, basically, our dragging item has to hit the target at least by 10%. If you don't put anything in there, the edges could touch, and it hits. So if it does hit, we're going to console.log('hit'). But if it doesn't hit, we want to go ahead and just send that back home, which we already have right here. So let's grab this tween and move it up here. So what we've done here is we've grabbed the Id from the dragging item and added the word Drop to it. We're looping through all the drop targets to see if they match. And if they do, then we're running a hit test on the dragging item to see if it hits a spot by 10%. If it does, we're going to console.log('hit'). If not, we're going to send the drag item home. Let's test this and see what happens. So here I am in the browser. And I think you're going to notice that we're going to have a little issue when we start dragging this. And this comes back to the jQuery issue I was talking about. If we try to match this, we get an uncaught error--this.hitTest is not a function. What that means is that, well, let's just jump over to code and take a look. Basically what that means is it's saying that this.hitTest or this right here doesn't have a method called hitTest. Why doesn't it? We know GreenSock gave us this method. It's because we're inside of a jQuery method of each. jQuery also uses the word this. And because we're inside of that jQuery, this now actually becomes part of the jQuery method. So it is no longer the dragging item. This is a very easy fix. So in order to fix that, all we have to do is declare a new variable up here at the very top under onDragEnd. And I'm going to call mine dragThing, and that's going to be equal to this. Now because we're not in the jQuery method here, we can use the word this to put into the dragThing object or the variable up there. Now all we have to do is anywhere inside of the jQuery method where it says this, we just change that to the dragThing. Now if we go back and check it, refresh the page, I think you're going to find that we're going to see a hit or it's going to go back home. So it hit, and it didn't go anywhere because it did hit. So let's see what happens if it doesn't match. It goes back home. So we have some of our game working already. Now let's get it to go where the target is. We need to do that right here. And, basically, I'm just going to grab this tween, because it's basically kind of what we want to do, except for we need to change the x and the y values. So these are going to be a little bit different. And those x's and y's right here, we're going to have to create some new variables. So let's go ahead and get started figuring out the offset values. The first thing we need to do is get the position of our spot. So we're going to do just pos here, and we're going to use jQuery's method on our spot to figure out the position. And that's a method here. Then we're going to use our---we're going to find out the difference of the top equals, then we're going to use our dragThing, the offset value that we had up there, Top (dragThing.offsetTop). We're going to add basically the position of that element .op (pos.top). So, we're just getting the difference of where the dragThing.offsetTop was, the offset, and where our spot top is. And we need to reset those. So, here, the difference of the top would basically go down where the y is. Remember, y is up and down, x is left and right. We can basically just duplicate this, change the word top to left, change this one to left, and change this diffTop to diffLeft. Copy that variable and place it down here in your x. Now let's see what happens if our targets get hit or if they don't get hit. Now notice that I've actually mistyped this offset here, so I'm going to reset that. And you can tell that if you have a good editor, it'll highlight the words. So, let's go over and check and see if we can get that to go to the target's x and y. So here I am in the browser. I've already refreshed it. Now let's drag over one of these, and we're going to miss it. It goes back home. Let's match it. Now as you can see, it goes right to the x and the y. So, again, we're going to match this. So now we have all of our objects being able to match with each other. In the next section, we're going to go ahead and make them disappear and pull in the Correct and the Try Again features. Adding the Final Touches So now that we have our targets hitting and then lining up with the drop target and also going home if they don't match, let's go ahead and hide the matches once they do get hit. So, when we do that, we want to make sure that this happens after they actually align up. So in order to do that, we can use the onComplete method. So we're going to do an onComplete, and we're going to call a function called hideMatches. Now we haven't created this function yet. We're getting ready to do that right now. I'm going to come down here, and we're going to create a function and call it hideMatches. Now what's funny is that how do you hide the matches? We really don't know what spot it's really hitting. And we need to create this dynamically. So I don't want to have to worry about going in and doing a check on every single one of those items. So wouldn't it be nice if we could pass the items that hit over to this hideMatches, and then we could just hide them that way? Well we can, and that's what we're going to do. And GreenSock, again, has done a great job. So, on this onComplete function, it also lets you call an onCompleteParams. So, we're going to just do this, Params. Now the Params is an array of objects. So you need to make sure that you always, whether you're passing one item or an object or two or three or whatever, you always have to pass this array in there. In order to do that, we need to pass over the item being dragged, which is right now the dragThing, and also the spot that it hit. So now we're passing those items over to this function down here. Now we need to set this function to accept some arguments. And what we're going to end up doing is creating one that says dragItem and the other is just going to say targetItem. And now we need to make both of those go away. Now another thing we need to do, and this is part of the game mechanics, is we need to increase every time this gets hit. So we're going to do totalHit++. And what that will do is increase our hits. So now we've one and then two and then three. And then we need to take them off the stage. So we're going to do TweenMax.to, and then we're going to do a dragItem. And remember to do the target. We're going to---we also want to make another item go away. So we're going to do the time here. And let me finish this up. Now we want the other item to go away. Well GreenSock allows us to tween multiple objects at the same time. So we're going to do dragItem.target and then comma and then targetItem (dragItem.target, targetItem). So now we can do both of those at the same time. We're going to turn on the autoAlpha, or turn it off really. And, remember, that's because I set the visibility to hidden and opacity to 0 at the beginning. Now I'm going to set both of those to 0. And then when this is complete, we're going to actually pull up and check the targets. We need to check and see if the game ends or not. So, we're going to do an onComplete, and let's checkTargetCount. Because if it is finished, we need to end the game. So let's create that function really quick--checkTargetCount. And we're going to see if(totalHit == totalTargets), then we're going to end the game. So at that point, we need to do a tween, we're going to just do a TweenLite here just to show you that we can still use it, TweenLite.to, in our case it was called modal. So we're going to call the modal here. We want it to pop up in about 0.3 seconds. And we're going to apply just the autoAlpha here. And we're going to apply that to a 1. So, what we're basically doing is we're going to come down here after our target hides. We're going to increase the total hits, then it hides, then as soon as it's done, we're going to check and see if the game is complete or not. If it complete, it's going to pull up this modal. If not, it's not going to do anything at all. So we have that game mechanics going. So we're checking the total hits, and we've got them disappearing. Let's just check it and make sure they do disappear. Here we are. I refreshed the game. I'm going to just check this. They match, and they are disappearing. Let's keep going and see if we can get our---I'm going to just miss that. It went back home, which is good. Not let's see if we can get our game over done. And it is. It pulls up and is says You Win! The last thing we need to do is we want the Try Again and Correct to pop up if you miss it or you get it correct. We want that to show some sort of response. Let's go over and finish that up. So in order to do that, we need to add a couple of things to our hitTest area. So in that area, if we do not make it, we want the Try Again to pop up. So we're going to do a TweenMax.to, and it's already going to go back home. So, we already got that going. Then we want to do a TweenMax.to and the Try Again has a class name of .tryAgain. And if you don't know it, just go over to your HTML and pull it up. Then we're going to make that come up in 0.3 seconds. And I like to go ahead and finish my line of code. And now what we need to do is we're going to scale this up. So right now, Try Again needs to be scaled down. So the way we do that is we've got to go all the way back up here to the top, and we're going to scale--- we're going to do TweenMax.set, and we need to set the .tryAgain, we need to set that to a scale of 0. And that's all we're going to do here. So, basically, it's hidden in the background. Come back down here. And all we're going to do is scale this to a number 2. So we're going to double its original size. So if you miss it, it's going to come up, it's going to double the original size, and then it's going to go down. Now, I want to show you another way that we can to an onComplete here. Also, we're going to do an autoAlpha to 1 because right now we have the opacity set to visibility hidden and opacity to 0. Now we have a scale up to 2. We have an autoAlpha up to 1. And we want to do something on an onComplete here. So we're going to do an onComplete. And I want you to know that you can do an anonymous function just like you can everywhere else. So now we have our function here. And once that comes up and shows, we want it to disappear again. So we're going to do another TweenMax.to, same element, .tryAgain. We pass in the time, which is 0.2 in this instance, we want it to disappear a little faster, comma. Let's get it ready for all the properties. And we're just going to set the scale back down to 0, autoAlpha to 0. We're going to delay this from going off about 0.5 seconds. And that should be all you have to add right here. Let's go check this out and see if Try Again comes on. I'm going to refresh this browser. Now we should be able to drag this anywhere, and if we miss something, it should show us the Try Again. And there it goes. So it comes on and goes off. The real quick---for the Correct, if they do land on each other, basically it's going to do the same thing as Try Again. So I'm going to copy this TweenMax code right here. I am going to paste this Correct area right before I hide those, so right here. And I'm just going to change tryAgain to correct, and that's the class name that's over there. It does the exact same thing. We're going to scale up to 2, scale back down to 0. Now, we don't have to set the correct up here in the top. So we're just going to leave that alone right now. Let's go test this. Refresh. And now if we miss, we should get a Try Again. If we hit, we should get Correct. It's working. So we miss it here. We're going to drag this over. So it seems to---our game seems to be working. So our transfer, the download, and let's see if we get You Win! So our game is complete. We have done the matching game, and you've see how GreenSock can basically do about anything you want, and it's smooth animation. Course Wrap Up Throughout this course on GreenSock, we've learned a lot of things. We've created some very simple animations to very complex timeline animations that strong together a lot of simple animations. We've learned how to use the Draggable features, the ThrowProps, and the SplitText feature. Now some of those are paid versions, and I would highly recommend that if you're going to use GreenSock a lot in your projects to become a Club GreenSock member. They offer a lot more paid features than I've shown throughout this course. I hope you've learned a lot, and I hope you incorporate GreenSock into your projects. Course author Todd Shelton Todd Shelton is a Front-End Web Developer making mobile/web applications. He is a lecturer at IUPUI's School of Informatics and Computing in Indianapolis, Indiana. He runs a successful user group... Course info LevelBeginner Rating (26) My rating Duration3h 12m Released7 Apr 2016 Share course