What do you want to learn?
Skip to main content
by Todd Shelton
Start CourseBookmarkAdd to Channel
Table of contents
Introduction to the Course
Ways to Import GSAP
Syntax and the First Animation
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.
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
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
Next Show How to Build in a Webpage Pt1
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.
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
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
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
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
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.
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...
Released7 Apr 2016