4.6 Setting Up the Animation Array

Hello and welcome back. Now, that we've determined which slide is our on-deck slide, we need to determine which slides we're going to animate. And these animations are going to be staggered, if we go to our project here and click on the down arrow, this is our finished product. You can see that even though all of the slides are using the same animation they are slightly staggered. So the top slide animates first, the second one starts immediately afterwards and the third one starts a little bit after that. So they are all staggered a little bit but, because of the way we're setting this up, we're not going to be able to use a stagger to animation. A stagger to animation in Tweenmax is only possible if all of the values you're animating to or all of the properties you're animating to have the exact same value. And these are not gonna have the same value. The top value is going to be different for each of these animations. So again we're not going to be able to use a stagger to animation. Instead we're going to use a loop and in that loop we're going to determine how much to delay each of the animations. Let's jump back to our starting pen here. And you can find the URL for that in your course notes, and once we open that up, let's go ahead and click on fork to create our own copy of it. And in our new copy, let's start setting up our slides. And when I say setting up our slides we need to create an array here in order to store all of the slides that we're going to be animating. And now that we've determined which slide is the on-deck slide we know all of the slides we need to animate. We need to animate the previous slide, the active slide, the next slide and which ever the on-deck slide is, whether it's up top or down bottom. And when we run through this loop that we're gonna create, in order to create all of our staggered animations. It's gonna be very important what order these slides in this new array are gonna be in. Because if we're clicking on the Next button, then slides are gonna animate up and the staggered animation is going to start with the previous slide. It's going to animate up first and then the active and the next and then the on deck. If we hit the up arrow on the other hand and go to the previous slide, everything's gonna animate down. And we're gonna start with the bottom slide, the next slide, and then the active slide and then the previous slide and then the on-deck slide. So either way the on-deck slide is gonna be the last because it's gonna be in one of two different positions. But if we're clicking on the Next button, the previous slide will start animating first and if we click on the Previous button the next slide will start animating first. So inside our animate slides function. We've already determined our on-deck slide and at the end of this if else statement. I'm gonna skip a couple of lines and I'm going to create a new variable here called current slides. And I'm gonna set that equal to an empty array, which is just a set of square brackets. Then, depending on whether we've clicked on the Next button or the Previous button, we're going to populate this current slides with the slides in the order that they need to be or in the order that they're going to be animated. So I'm going to say if is next and then after that will have an else statement. And since we already have this same if else statement over here we could go ahead and do all of this inside that one. So let's do that let's grab this current slides declaration and cut that. And I'm going to paste it up here after on-deck. And this will help keep things a little more concise so that we don't have two separate if statements with the same values. So if is next then we're going to determine the on-deck slide and then we're going to populate that current slide's array. So, here's how we're gonna do it. We're gonna do current slides equals, and then we'll have our opening and closing square brackets for that current slides variable and a semicolon in our statement. And then inside those square brackets, we're gonna put each of our slides one by one that need to be animated. Well it's been a couple of lessons since we've talked about, if we scroll back up to the top these active next and previous variables that we created earlier. And those three variables are there to help us keep track of the index number of the active next and previous slides. Similarly, the on-deck variable that we created here is an integer designed to help us keep track of which slide is going to be the on-deck slide. So we can use those four variables here to populate our array. And remember we already have an array that has all of our slides in it and that array is simply called slides. So we're gonna pull slides out of this array and put them in our new array. Now, we're not actually gonna remove them from the slides array. But we're going to pull them from the slides array and stick them in this current slides array in the order that we need them. And I just realized that I did not capitalize the s in slides here. Need to make sure that it's capitalized the same way it is in your variable declaration. Okay. So, inside the square brackets, the first slide we animate if we click on the Next button is going to be the previous slide. It's going to animate up first and then the active next and on-deck will animate pretty soon afterwards in a staggered fashion. So again the first one we're animating is the previous slides. We're gonna point to the slides array and then inside square brackets we would type in the index number of the slide that we want to animate first. Well that index number is stored in this variable called prev or previous. So this is how we point to whatever the current previous slide is. So we need to remember after we create these animations to assign new values to this previous variable as well as the active next and on-deck variables. And actually we don't need to worry about on-deck because that's determined at the beginning. But we do need to determine what the active and next ones are once our animation is done. Okay so again our current slides, we're putting these in the order that we want them to animate. So the first one is the previous slide. The second slide we're going to animate is going to be the active slide it will animate right after the previous slide. The third one is going to be slides and then inside square brackets that's gonna be the next one. And then finally will animate slides on-deck. And again remember each of these values here on-deck, next, active and previous those are just variables we've looked at before that store integers. Okay, so those are our current slides if we've clicked on the Next button. If we've clicked on the Previous button then those current slides are gonna be a little bit different. So let's copy this entire line here. And then down here we're going to paste it and we're basically just gonna swap the next and previous. So, let's take previous change it to next and then will take next and change it to previous. And that will put our slides in the order they need to be animated in if we've clicked on the Previous button. So, now all of our slides are in position where they need to be except for possibly the on-deck slide. The previous active and next slides, we know, are already in their starting positions because we can see them. And when we click on the up or down arrow, we're gonna see them animate to their new position. But the on-deck slide hasn't been placed where it needs to be at. If we click the down arrow, it needs to be placed down here at the bottom. If we click the up arrow, it needs to be placed at the top. So, before we get any further still inside this if statement. Lets after we declare or populate current slides array. Let's go ahead and set our on-deck slide where it needs to be. And we're going to use TweenMax.set to do this. And you could do this with a JQuery if you wanted to but since this is a TweenMax tutorial we might as well go ahead and use TweenMax to do it. So we're going to point to the on-deck slide. So we're going to point slides and then, inside square brackets, on-deck. And then after that, comma space, and then a set of opening and closing curly brackets for the properties that we're going to set. Well, here we're just going to set the top position. And if we've clicked on the Next button, then the on-deck slide needs to be down here at the bottom in the down position. Remember we created all of these positions earlier this positions object. So we can get to that by typing postions.DOWN with all caps. And that will put it where it needs to be, so we have top: space Positions.DOWN, with all caps and then a semi-colon at the end of that statement. Then, we can copy that, paste it down here in the else statement. And the only difference here is else, if we've clicked the up button, we want it be up here at the top. So instead of positions.DOWN, we're going to place it in the positions.UP position. So I realize we've done a lot of work here and we still haven't gotten to our animations yet, but we are getting a lot closer. So in the next lesson I will move forward and figure out where each of these slides needs to be animating to. We know where they all are currently we've all set them in the position where they need to be at the start of the animation. But now, we need to determine their final location and then we can create the actual animation itself. So, let's save our work and move on to the next lesson. Thank you for watching.