3.4 Animating the Dots

Hello and welcome back. In this lesson, we're going to animate the randomly positioned dots that we've spread across the stage, and we're also going to fade them in. Remember, we created this opacity variable here. And we're gonna start these circles out at an opacity of zero. They're gonna be completely invisible, and then we'll fade them in to whatever random opacity is generated here. So the starting pen for this particular lesson can be found in your course notes. Once you open that up, we can click on the Fork to create a new copy of it. Now with this new copy, the first thing I wanna do in our JavaScript is make sure we put a semicolon at the end of this TweenMax.set method. So we'll end that particular line of code, and now let's animate the position of our circles, let's animate them back into place. Now, we're still doing all of this inside this each function that we created for each of our circles. So just after our TweenMax.set, let's skip a couple of lines, and now let's create a TweenMax.to animation. So again, we're gonna be animating whichever current circle we're looking at as we loop through this each function. And the way we point to the current circle again is by typing in this. So then we'll type comma space, and then how long do we want it to take for each of these circles to get back to their original location? Let's say, two seconds. So that's our duration. Now, we need a set of opening and closing curly brackets inside which we will put our properties that we want to animate. So we want to animate the x property back to zero. We want to animate the y property back to zero, and we can already see a lot of this happening on the screen. And there we go, we already get a pretty good idea of what this animation is gonna look like. Now we're gonna make it look better but that's a good start, and now we're going to animate the opacity from invisible to whatever the random opacity we came up with up here is. So after the y, we'll type comma, go to the next line and set opacity equal to the value of our opacity variable. Let's see how that look, it's kinda going backwards here because it's going from fully opaque to semi-transparent. Let's reverse that, let's go back to our CSS, and let's set our opacity for our circles back to zero. And then let's watch the animation, and we might need to save and then the reload the page. Let's do that, and there we go. And we're a lot closer to where we want it to be, but we're not quite there yet. If we refresh it or reload that frame, it's kind of all happening at the same time, and it's a little too uniform for me even though the positions have been randomized, and the opacities have been randomized, the animation itself still feels kind of stiff. So one way we can fix that, is by adding a little bit of easing, and this will just do a little bit to fix it, but I'm gonna do a Power4 ease, if we can get this right. Power4.easeIn with a capital I out with a capital O. And this will alter the speed a little bit, so it kind of zooms towards that final location and then slows down a little towards the end. And I really like the way that looks, but I still want to randomize this a little bit more. And what I want to randomize now is the delay of the animation. Right now they're all starting and ending at the exact same time. Well, since they're coming from different locations and they all fading into different opacities, it would be nice if they all kind of came in at their own leisure. So they're all gonna come in at randomized intervals. So what I'm gonna do, is I'm gonna create another variable after our x and y positions, and we can call it random delay or something like that, and we're gonna set this equal to math.random. And again, we would want to decide what our upper and lower limit are gonna be. Well, some of them might start right away, and let's say the latest stragglers will start at around two seconds. So we're gonna do a random number between zero and two. So we'll just do Math.random times two. And then down here in our TweenMax animation after our easing, we'll type comma, go to the next line, and we'll set our delay equal to the randomDelay variable, if we can spell it right, that we just created. And now, We get a much more organic type of animation because, let's reload that again. Because they're all starting at different points in time, and they're all ending at different points in time, and that really gives it a cool feel. So that's really the core of our logo animation. We're gonna to do a little bit more with the lettering that's gonna go inside this big C here, but again, that's kind of the core of the animation with these circles fading in and animating into place. Now, we can play with this core animation a little bit by playing around with different easing equations. For example, let's say we wanted to try an elastic animation. Let's just do Elastic with a capital E .easeOut with a capital O. And let's watch how that changes things. And that still kind of a cool animation. Everything comes into place, but it kind of wobbles back and forth as it eases into its final position. And we can watch that again by reloading the frame, and there we go. That looks pretty cool, you could also do something like a Bounce.easeOut. Now, it's not gonna look quite as cool because it just doesn't make a whole lot of sense to bounce in from a bunch of different directions, but there's other options as well. We could do Back.easeOut where it moves past its final location, and it just kind of settles back in, and that looks pretty good as well. But I do wanna stick with our original plan, which was Power4.easeInOut. And once we get that back in place, we'll watch our animation one last time. And there we go, that looks really good. So in just a few lines of code, we were able to create this really nice looking almost particle effect with our 150 circles animating into place and resolving into our main logo. So let's save that, and in our next lesson, we'll get started animating the text.