2.7 Animating the Preloader Off

Hello and welcome back. We've gotten our animation to the point where we've loaded all of our images and once we've detected that all of those images have loaded, we've paused our timeline. So our three circles are now paused in place and now we wanna move forward with creating our outro animation. So before we get started, you can find the link for the current starting pen in your course notes. Once you open that up, you can click on Fork, and we'll start with a new copy. So in our new copy, I wanna scroll back down to the loaderOut function and actually want to call this function something else. When we had just one image that was loading, it made sense to call this loaderOut, because we would just create a load event listener for a single image. And once that image was done loading, then we would animate things out inside this loaderOut method. However, things are a little bit different now. Now we have ten separate images that are loading and we need a function, which is what this function is doing, that detects how many images have loaded. And once we know that all of them have finished loading, then we can trigger a loaderOut method. So I'm gonna skip a couple of lines after the current loaderOut method and create another one called loaderOut, and we're gonna rename this first one to checkLoadProgress. So now we've got something a little bit different going on. We need to highlight that checkLoadProgress and copy it, and remember when we're loading or when we're creating our load event listener for images, we need to make sure that we call that checkLoadProgress method. And then we're gonna let that checkLoadProgress method, after it's determined that all of our images have finished loading, we're going to let it call the loaderOut method where our final animations are going to take place. So instead of putting the tl.pause right here, let's cut that and put it inside the loaderOut method. And then inside this if statement, where we're checking to see if all of the images have finished loading, at that point, we'll call the loaderOut method. So now, if we watch over here on the right, we should see the same functionality that we saw at the end of the last lesson. Where after ten images have finished loading, we should see this pause and there we go, it has paused, so we know that it's calling this loaderOut method correctly. So now that we've paused the animation, let's create our outro animation. So let's find that loaderOut method again, there it is. And after we pause it, let's skip a couple of lines and for all intents and purposes, we're done with this first timeline, and I'm gonna start with a new timeline as we animate this off. So we're going to create a new timeline called tl2 and, again, we'll set this equal to a new TimelineMax object, (); to end your statement, and then we're going to insert a few animations into this. The first thing I wanna do is I want to animate the top two circles off, I want to get rid of them and then we'll animate the larger circle out to the sides, and eventually it will take up the whole screen and then fade out. So let's start by fading off the top circle and the middle circle. So we'll skip a couple lines here and I'm gonna point to tl2, and we're going to insert a new tween into that new timeline that we've created. And we're gonna use a staggerTo animation cuz we're going to be animating two separate items. Now remember, when we're using the staggerTo method, it's expecting an array of objects, and we can't just call on the circles array, because we're not animating all three of our circles. We're just gonna be animating two of our circles, the top one and the middle one, which are actually, if we go to our HTML, that's gonna be circle3, which is the top one, and then circle2, which is the middle one. So we actually need to create a new array and then put those in that order. So the first item in the array needs to be circle3, because it's gonna be the first one we animate off, and then the second item is gonna be circle2. So let's go back to JavaScript, and just before this insert statement, let's create a new variable called circlearray. And we're gonna set this equal to two separate objects, excuse me and I'm just gonna do it this way, I'm gonna put the CSS selector for it inside quotation marks. So we have ".circle3" and then ".circle2", and these are the two items we're going to animate. So let's go back into our tl2.insert and let's create a new staggerTo method using TweenMax. So I'll say TweenMax, with a capital T and a capital M, .staggerTo, with a capital T. And then inside parentheses we need a few different items. The first item we need is the array of objects that we're going to animate. And we stored those in an item called circle array, comma space, and then how long do we want each of those animations to take? I want this to be pretty quick, so we're gonna do it in half a second, so we'll put 0.5 there. And then inside curly brackets we need the properties of this animation, and all I'm going to animate here is the opacity, we're gonna animate it down to 0. And then after the closing curly bracket for the staggerTo, we're gonna type comma space and then we're gonna to enter in how much space we want in between each of those fading animations. I'm gonna do 0.2, so those animations are going to occur 0.2 seconds apart. So let's watch, and after the ten images have finished loading, our initial timeline will pause and our second timeline will take over. And we saw that the top two circles animated off very quickly, and that works out pretty well. So now we want to move onto our second animation, where our larger circle is going to animate outwards, and that larger circle, remember, has a class of circle1 applied to it. So just after this tl2.insert, let's skip a couple of lines and we'll do another tl2.insert. And let's go and nudge that closing parenthesis down a couple of lines. And then inside this insert we're going to do TweenMax.to. Here, mainly, I want to animate the width of this new circle or of this larger circle, which again has a class of circle1, so inside quotation marks we'll type ".circle1" comma space. How long do I want this to last? Again I want to be pretty quick, so we're gonna make it last half a second or 0.5 seconds, comma space, and then our opening and closing curly brackets for that TweenMax. Inside these curly brackets, I want to first of all animate the width. I'm gonna animate it out to a value of 100%. And since we're doing it as a percent it needs to be inside quotation marks. I'll type comma and then I'll go to the next line and I'm also going to animate it to a scale of 1. Because as these are bouncing up and down, we don't know how large that outer circle is gonna be when the animation is suddenly paused. So it might not be at its full height, or it might be larger than its full height. So we wanna make sure that we animate it back to a scale of one, and we see right away that it animates off to the right, which isn't exactly how we want it to look. We want it to animate out in both directions. But remember, our left property of this circle has been set to 50%. So all we need to do is set the left property back to 0. And so let's jump to the next line here, and we're gonna set our left property to 0, and then there's also a margin that's been applied. So, I'm also going to set marginLeft and we're gonna do it all as one word margin, and then Left with a capital L, we're gonna set that to 0 as well. And then I also want to, right now the border radius is what's causing this to be a circle, I want to flatten out or sharpen up those corners. So we're also gonna change borderRadius to a value of 0 pixels, and that should take care of it, except that I also wanna add some easing. So let's do that real quick, we'll set our ease property to a value of Power1.easeIn with a capital I. And then the last thing we need to do, remember we want to insert this at the end of the current timeline. And so after our closing parenthesis for this TweenMax method, I'm gonna type comma space, and we're just gonna do a +=0 there, and that should take care of everything. So let's watch our animation, as our images are loading, we see the circles bouncing, and then hopefully once that tenth image is done loading, it will pause, and we'll see the rest of our animation and there we go. So, that's a really good start, our circle is now a rectangle, now that it's taking up the full width, let's animate it up to take up the full height. So, at the end of this tl2.insert, let's skip a couple of lines and do another tl2.insert, and again, we'll nudge that closing parenthesis down a couple of lines and put a semicolon at the end of that statement. And then inside this one, we're gonna do another TweenMax, and this time we're gonna animate the same object, the circle1 object. So let's create our TweenMax.to, and again, we're gonna point to circle1, and I want this one to take half a second as well. So we'll do 0.5 seconds, comma space, and then our opening and closing curly brackets for that TweenMax. Inside this TweenMax, or inside the curly brackets I should say, I want to animate the height to a value of 100%, again that needs to be in quotation marks. And we're gonna have the same issue here, we're just gonna animate downwards, we want it to animate up as well, so we're gonna set the top property back to 0, because the top property was set to 50%. Same thing with marginTop, we're gonna set it to a value of 0, and then we're gonna add our easing equation here. This one I'm going to put an elastic ease on it and I'm going to do an easeInOut. So elastic.easeIn with a capital I, Out with a capital O, and that should get us close to what we're looking for. So after that TweenMax, we'll type comma, space, and then again I'm gonna do +=0. So once it loads or reloads once again, we'll watch our initial loading animation. And then when all ten images have finished loading, we should see everything up to our purple rectangle taking up the full screen and that looks good. So now all that's left to do, is to fade our purple rectangle out and show the image behind it. But the problem right now is that there is no image behind it. If we go back to our HTML and comment out our preloader, We see that there is no image behind our preloader, it's just a blank canvas here. And we need to apply that background image to this image container. Well, let me show you how we're gonna do that in the next lesson. For now, let's turn this back on, and we've gotten our JavaScript or our final animation really close to where we want it to be. We just, well, actually you know what, before we move on, let's go ahead and fade this preloader out. We won't see the image behind it, let's go ahead and fade it out, and in the next lesson we'll show you how to apply that background image. So I'm gonna do another tl2.insert statement here, and then inside that insert statement, we'll do one last TweenMax.to. In here, I'm going to animate the preloader class, which is the class or the div that contains everything in our preloader. We're going to animate that whole thing off and we want this to take 0.5 seconds. And then inside curly brackets we're going to animate the opacity to 0, and then after the closing parenthesis, we'll type comma space += 0. So now after our animation finishes, after all of our images are done loading, we're gonna see that circle animate out to the sides. Then we're gonna see it animate upwards and downwards so that it takes up the full width and height of our stage, and then we should see it fade out and there we go. So we see the text behind it, we just haven't loaded the image yet. And once again, we'll get to that in the next lesson, so let's save our file, and I'll see you then.