Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:25Length:3.1 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.7 Setting Up the Animations

Now that we've set all our slides in place, we've created our currentSlides array, which puts the slides that we're going to animate in the order that we're going to animate them, and we've placed our onDeck slide where they need to be. It's time to figure out the ending destination locations for each of our animated slides. Once we do that, then we'll be able to animate them. So, what we're gonna do is, is we're gonna create a four loop that's going to loop through all of the slides In this current slides array. For each of the slides that we loop through, we're going to determine where the destination top position needs to be located. We already have the starting top positions for our on deck slide, as well as our other slides, our previous, active, and next. Those are already in their initial top positions. But now we need to determine the ending top position, and so we're gonna again, loop through that array, determine the top position that it needs to end up at and then create our TweenMax animation. So after our else statement here, let's skip a couple of lines and do that. So we're going to create a for statement and we're going to create a counter variable here called i and set it = 0. We're going to loop through this as long as i is less than currentSlides.length. And if this type of construct doesn't look familiar to you then you probably need to go to a introductory JavaScript lesson but this is a typical for loop. We're going to loop through the current slides array and for each item in that array we're gonna do something. We're going to determine, first of all, what the destination top position needs to be. So I'm just gonna create a variable inside this loop called top and this is gonna end up being a different value for each slide that we animate. And this I counter here is going to continually increase as we loop through this fore loop over and over again. So the first time we run through this fore loop, I is gonna = 0 and we can use this I to point to the index of the current slides array that we need to look at. So I'm gonna create a switch statement here and we're gonna switch on that variable i And then we need our opening and closing curly brackets and a switch statement is basically just and if else statement with a bunch of else statements inside it. So what we're gonna do is we're gonna check the value of i and then we'll use case statements inside that switch to perform different actions based on what that value might be. So let's create our first case statement case 0, and so what we're saying here is if i equals 0, then we're going to do something. And what we're going to do is we're going to set our top variable equal to a certain value. So if I equals 0 that means we're pointing to the very first slide in our current slides array. Remember this is not our slides array, but our current slides array and this is going to store the four slides that we need to animate. So if case is equal to 0. We're gonna be looking at the very first slide in this array. So if we click on the next button that first slide is the previous slide. If we're clicking on the previous button that first slide is gonna be the next slide. So the question is where is this slide going to end up when it animates? Well if we click on the next button remember that first slide is the previous button or the previous slide it's up here at the top. So if we click on the next button that previous slide needs to move up into the up position. Otherwise if we've clicked on the previous button then that first slide is going to be the next slide. The one down here and it's going to animate down Into the down position. So let's do this using a operator. So if we're looking at the first slide in the array, it's going to be either this one here if we click next or this one here if we click previous. We're gonna use that isNext value that we passed into our animate slides array. So if isNext is true then we're gonna set it to positions.UP. So if we've clicked on the next button the first item in the array will be the previous slide which is the one up here and we're gonna move it up into the positions not up position. Else, we're gonna use the : here, after the : we'll enter in the value if isNext is false. So if we've clicked on the previous button then our first slide is the next slide and that next slide will be moving down into the down position. So the else statement here will be positions.DOWN and then when we're using these switch case statements we always need to put a break after any of the functionality that we're going to enter there. So we have case 0 with a colon at the end and then we have whatever functionality we have inside that case with the semicolon at the end of all of our statements there and then our last statement needs to be a break. Okay, so that's what we need to do If we are looking at the current slide if we are looking at the very first slide in that array. So the very first time we loop through this fore loop, it's going to hit this first case statement. The second time we run through the fore loop, i is gonna be equal to 1. So we're gonna do case 1, and this time we're gonna be looking at the second item in the array so slides.active. And regardless of whether we've clicked on next or previous, the second item is going to be the active item. It's gonna be this item right here in the center. But there is still going to be a difference. If we click on the Next button, it's gonna move up to the previous position. And if we hit the previous button it's gonna move down to the next position. So again we're gonna use this ternary operator. We're going to say if isNext. So if we've clicked on the next button then we want to set this to positions.PREV or previous. Else if we've clicked on the previous button then we wanna move the active item down to positions.NEXT. Okay and then after that we'll have another break statement. The next time we move through this fore loop i is gonna be equal to 2. So when i is equal to 2, we're looking at the third item in the array which is either the next or the previous item. And so this is actually going to be the easiest one to come up with. So if we're looking at the next item, we've clicked on the next button. I didn't mean to scroll there, sorry about that. So if we click on the next button, our third slide is the next slide down here. So if we click on next that third slide is going to move up into the active position. If we've clicked on the previous button, then that third element in the array is the previous slide and if we click on previous that's going to move down into the active state as well. So we don't need any kind of ternary operator here we don't need any kind of evaluation we know that no matter what this second item is gonna move into positions.ACTIVE. So that's gonna be the final location for the third item in the array. So we need our break statement there as well. And then the next time we run through this current slides array we're going to be looking at the last item which has an index of three and here we need another ternary statement. So this is going to be our on deck slide. Our on deck slide is always the last one. So if we've clicked on the next button, this one down here. Then the on deck slide is the one down here. And we're gonna move it up into the next position. So if it isNext then we're gonna move it to positions.NEXT. Otherwise, we're gonna move it to positions.PREV Because it will be up here at the top and it will move down into the previous position. And then we need a break statement here as well. Now a good thing to do inside a switch statement is to also include a default statement in case all of the others are false and here we'll just break inside that default. So as we loop through this for loop, we're going to encounter each of these case statements once. And so we're gonna set the top value for each of those case statements and then once we've set the top value while we're still inside this for loop, we're going to create our animation. And it's gonna be a very simple animation. Let's just come here after the closing curly bracket for our switch statement but still inside our for loop. I'm gonna skip a couple of lines, and we're gonna do a TweenMax.to. Now the item that we're going to be animating as we loop through this for loop is going to be currentSlides[i]. So we're looking at the slide with an index of i, so again as we loop through this we'll encounter every possible value of i at some point. So we'll determine what the top value needs to be and then we'll animate it. So as these move into place I want each of these items to last two seconds. So I'm gonna type comma space 2. And then another comma space open and close curly brackets. And then in between those curly brackets we'll enter in the positions that we're going to animate, while we're only going to animate the top position. So we'll go in type top: space. And we've already calculated what that top position is going to be by the time we get down to this TweenMax statement that's what the switch statement was for, was to calculate what the top position needs to be. For the current item as we're looping through this for loop. And so, we're gonna set it equal to that top variable that we created. Then after that, and it looks like our tabbing has gotten off at some point but that's okay. After that, we're going to set our ease To Elastic.easeOut, with a capital O, and then we need a delay because we don't want all of these to animate at the same time. We want there to be a delay there, and so we're gonna use this i value. Let's go ahead and create our delay using the delay property, and we're gonna use this i value and multiply it by however much we want that delay to be. So here I wanted to be 0.1 and this would be 0.1 seconds. So the first time we loop through this, it's gonna be 0 times 0.1 which is 0. So there's not gonna be a delay at all for the first slide that animates. The second slide that animates has an index of 1 and 1 times 0.1 is 0.1. So the second item, is going to have a delay of 0.1. The third one will have a delay of 0.2 etc etc. So we've created this animation but we can't actually animate it yet because we haven't created our click events for our buttons and we'll get to that in the next lesson. So let's save our work and I'll see you then.

Back to the top