2.2 Creating a Timeline

Hello, and welcome back. In this lesson, we're going to start with the same code pen that we were looking at in the previous lesson. And we're gonna use this as a starting point for our project. So we have our HTML in place, we have most of our CSS in place. Now we're gonna jump into JavaScript and start creating the base animation that we're gonna be using for our preloader. So any time I refer to a starting pen in this course you can probably expect that you're gonna be making your own copy of that starting pen. And the way we create a copy of it is up here at the top there's a button called fork. When we click on fork we're actually opening up a new copy of it. So what we're looking at now is a different webpage than what we were looking at just a second ago. I've just created a new fork and we're gonna start making our changes to this particular fork. And you can find the link to the starting pen in your course notes. So once again, as a reminder, we have our preloader and that's all we're gonna be concerned with for now. But we have this preloader div it has a class of preloader and inside that div we have three separate divs, each with a class of circle and that's our three circles here in the center. And so those circles are what we're going to start animating as we create the body of the animation for our preloader. Now, in our refresher, we created a TweenMax object. A tween is basically just a single animation. You might want to get one object or a group of objects from one key frame to the next. You might be animating a few different properties during that animation. But a tween in and of itself is just a single animation going from one key frame to the next. And we're actually gonna need something a little more robust than that for what we're gonna create here. Because we're going to create a series of steps in our animation in order to get from one place to the next. So we're gonna start off by just fading our three circles in and increasing their size. And that'll kind of be phase one of our animation. In phase two of the animation, they're basically just gonna bounce up and down in place until our background has finished the loading. And then we'll move on to the last phase of our animation where everything starts to animate off and even that phase is gonna have a few phases within it. So again, that requires something a little more robust than just creating a tween, which again, is just one animation from one key frame to the next. So instead of using TweenMax here, we're gonna be using a series of tweens inside a TimelineMax object. So in our JavaScript I'm gonna start by creating the couple of variables here. Our first variable is gonna be called $circles, and it's going to basically just hold all of our divs that have a class of circle applied to it. So we're going to set this equal to and we're using JQuery here for our selector. Now notice JQuery starts with a $(), and then inside the () and inside quotation marks we're gonna type in our CSS selector which is .circle. That .circle refers to the circle class. So now, in this variable we've stored all three of these circles, and if we need to reference all three of those circles we just do that using this variable. Then I'm gonna create another variable to store our timeline and I'm just gonna call this variable tl for timeline. And the way this works is we're gonna set it equal to a new instance of TimelineMax with a capital T in Timeline, a capital M in Max and then an opening and closing parenthesis and a semicolon to end our statement there. Now since we have two variables in a row we can actually shorten this a little bit, and instead of having two separate lines, we can say var circles equals whatever. And then instead of a semicolon we have a comma, and then we can declare our second variable without using the var keyword. So now that we've created our timeline object, we can now start putting tween objects or inserting tween objects into that timeline. And I want to start off with all three of our circles invisible. So let's jump into our CSS and change the opacity. So let's stretch this out so we can see a little bit better. And I'm looking for the circles class or the circle class, here we go. And I'm just gonna add another property here called opacity and set it equal to 0 and now those circles have disappeared. And when I'm creating animations, I generally like to set up the stage or set up the browser how it's going to look at the end of the animation. Or how it's gonna look at a key point in the animation, so that I can see what it looks like. And then when I get it where I want it, as far as the design itself goes, then I'll go in and make things invisible where I need to or hide things or move things off the stage if they need to be moved. But generally I like to start off by getting everything in its final position so I can see what it looks like. So that's what I've done and now I've set that opacity to 0. So let's jump back into our JavaScript. And now let's take a look at how to insert a tween into our timeline. So we're gonna skip a couple of lines here and we're gonna use the insert method of the TimelineMax class. And the way we do that is we point to our TimelineMax object which we stored in a variable called tl. So we can say tl.insert (); to end that statement. And then in between that opening and closing parenthesis, I'm gonna hit Enter to nudge that closing parenthesis down a couple of lines. And then in between those, I'm going to insert a tween. Now this particular tween is going to be a staggering tween. We're gonna have all three of our circles animate on at the same time but we want their entrance to be staggered a little bit. So we're gonna use the staggerTo animation of the TweenMax class instead of the to animation that we talked about in our refresher video. So the way that looks as we type TweenMax with a capital T and a capital M.staggerTo with a capital T. And then inside parentheses we have a number of objects or a number of parameters that are expected. The first parameter is the object that we want to tween. And when you're using a staggerTo or staggerFrom animation, the items that your tweening, the items that you're animating, actually need to be stored inside an array. So one easy way to do that, we've already stored all of our circles inside this variable called circles. So inside the parentheses here, I'm gonna point to that variable, which again, is called $circles and then I'm gonna say .toArray with a capital A open and close parentheses. So that will create an array and put all of our circles inside that array. So these are the items we're going to be tweening, then we're gonna type comma space and the next thing we need is the duration of the animation. Now keep in mind, this is not the duration of the entire animation from the beginning of the first item that's being tweened to the end of the last item being tweened. Instead, this is the duration of each one of those items being tweened. So each of our circles is going to fade in and grow into place on the stage. And the duration we enter in here is how long it's gonna take each one of those circles to animate on. And I want that to take 1 second each, so I'm just gonna type in a 1 here. And then the third item that's expected, we'll type comma space, is an object that contains the properties were going to be tweening. So that object is going to be contained inside curly brackets. That's how we create an object in JavaScript and then we need one more thing after that object. We'll fill in this object in just a second, but for now I want to get all of our parameters out of the way. So after our closing curly bracket there I'm gonna say comma space and then the last thing we need here is another number that represents the stagger delay. In other words, how long after the first animation starts do we want the second animation to start? And this is gonna be a very short stagger, I want these to be just 0.2 seconds apart, so I'm gonna type in 0.2 here. And then, after that closing parenthesis, I'll type the semicolon to end that statement. So again, we're expecting a few things inside the parameter list for our staggerTo method. We have the items being animated, the duration of each of those animations, the properties we're going to animate, and then the stagger delay in between each of those items being animated. So now we're gonna jump inside these curly brackets here and I'm gonna hit Enter to nudge that closing curly bracket down a couple of lines. And then inside those curly brackets we're gonna enter in the properties that we want to animate. So we're animating the opacity of these objects, which we've already talked about, and we're gonna animate it to an opacity of 1. And I've already seen one mistake that I've made inside this insert statement. We're not putting an entire statement inside this. So we don't need a semicolon at the end of this staggerTo. In fact, if we take that off we'll probably already see part of our animation and yeah, we see it over here on the right. So inside that insert statement, even though you're used to putting a semicolon at the end of all your statements, don't put it at the end of whatever tweens you put inside that insert statement or you will break the code a little bit. So we have them animating on, they're fading in. Let's right-click and reload that. But that's not all I want, I don't want them to just fade in. I want them to start off small and I want them to grow into place. And in order to do that, we need to set initially our scale and we could do that a number of ways. We could set the width and height to 0 in our CSS and then change the width and height here or we can do something different. Before we get to our insert, let's create a TweenMax object here and I'm gonna call it a TweenMax.set. TweenMax.set sets a set of properties for a particular object to a specific value. It doesn't animate to that value, it just sets it to that value. So I'm gonna set the scale of our circles to 0. So this is very similar, as far as the syntax goes, it's very similar to a TweenMax animation. In that the first thing that we're looking for inside our parameter list is the set of items that we're going to animate which is stored in our variable called circles. And then instead of a duration here because this is not an animation, so we don't have a duration. The next thing is simply going to be an object with a list of properties that we want to set and here we want to set the scale to a value of 0. So we just have scale:0. So we've set the scale to 0 and now even though the opacity is animating on, we don't see anything happening. Because when you have something set to a scale of 0, it's basically too small to see. So the next thing we're gonna do is create another property here. So let's say, comma go to the next line and here we'll set scale to a value of 1. And now we should see our circles growing into place as they fade in. And we can, again, right-click over here and reload the frame and watch that again. And that looks really good, that's a good starting point for our animation. Now there's still a lot left to do but now's a good time to go ahead and take a break. So I want you to save the fork that you've been working on. I'll save mine as well and in the next lesson we'll pick up where we left off.