3.1 Animating in a Circle

Hello, and welcome back to Advanced Animation with GSAP Plugins. In this lesson, we're going to start talking about the Bézier plugin, which as its name implies, allows us to animate and object around or along a Bézier curve. Now a Bézier curve is simply a curve that's defined by a set of points. Some of which may have handles on them, so if it has handles on them it's going to define a curve. If it's a point without any handles on it it's going to define a corner. Either way, our object will move around the path defined by these busy a points and handles. And if you've ever used illustrator or another vector authoring tool, then you're probably familiar with Bézier curves the Bézier curves in Illustrator are the curves that define a shape. And if you click on a shape in Illustrator you can see the points and the handles coming off of those points that help define the curve, or lack of curve and the shape itself. And we're going to be using a similar concept to animate our objects using this Bézier plugin. So, I want to take what we have on the stage where we've got our starting code penned here. In a minute go ahead and fork it so that we don't forget to do that but the starting pen here. The your L Forte will be included in the course notes. So, once you navigate to that particular pen go ahead and fork it so we can create our own copy of it. And once we have our own copy created, we can get started. So as you can see in our HTML I have and I tag here with an ID of plane and that's what this plane is here. And I'm using the font awesome icon set for this particular graphic. If you're not familiar with Font Awesome. Let's navigate to that website here and I'll all include the URL. for this in the course notes as well but the font awesome icon set is just what it sounds like it's a set of icons, that are embedded in a font. And since it is a font you can resize your icons as large or small as you want to and they will look nice and crisp. They'll look really nice at any size. So, if you go to the Font Awesome website, you can download the files for that here or as we're going to be doing in this course you can link to the CDN. And you can find the CDN link if you go to the Get Started link here and scroll down just a little bit. And here's that link for the CDN file. So, you can also click on the icons link here and that will take you to a page that has all the list of all the different icons that you can embed in your page and again these icons are based on your font size. So you can adjust your font size to make these icons as large or small as you would like. And the way you embed these is you add two classes to the element you're going to apply them to. So, if we go back to our code pen here, you'll notice that this I element has two classes. It has a class of fa for fun awesome. And it has a class of fa-plane, which is the specific class for that specific plane. So, whatever you're putting here, you're going that definitely have the class of fa, and then you're also going to have the more specific class, afterwards. So, once we have that in place you'll notice I've got four separate divs here that are defining these four points on the stage, and initially those are the four points we're going to be animating around. Now, keep in mind that these divs don't have to be here. The GSAP Bézier plugin does not require any divs or anything like this, it's not going to even look at these divs to see how to animate our plane. I'm only putting these divs here, so that we can see where our points are going to be when we start animating things. So, it's really just a visual guide for you, it's definitely not required for this animation. So you can see the CSS for our plane, and our plane has an ID of plane. So, that's what we used hash tag or pound plane here and we've given it a color of dark gray a font size of 80 to make it nice and large. And I'm also going to give it a position property of relative because we're going to be animating the left and top properties, and that won't work unless we set the position of relative otherwise it's just gonna stay in the upper left hand corner here. Also, I wanna go ahead and put it in its starting position which is gonna be where our first point is here. And if we scroll down in our CSS section, we can see points one two three and four and their left and top position. You'll notice they also have a class of point which is what is defining the appearance of each of those. But again if we go to point one, two, three and four we can see the left and top properties. So we're gonna go to a left position of 150 a top position, excuse me, a 50 pixel so I can just highlight both of those and copy them and then we'll come back up here to our plane and paste them. We'll go ahead and move that top down to the next line, and there we go. So now it's in that position, now it's not exactly where we want it just because the top left corner of that icon has been placed at that position. And we can, if you want to see that a little bit better, we can right click and inspect that element, I'm using Chrome here. So, it allows us to do that and we can see as we hover over our I icon how that is located and we can adjust the position if we want to. Let's go ahead and close that down a little bit and I'm going to adjust the position Simply by changing its margins so will set margin top here, to let's try -30 pixels. And see where that moves it looks pretty good maybe about 32 and then will also set margin left to a value of, maybe negative sorry, -30 again there and see where that puts it. It's go a little bit further than that -40 and we'll just keep it just saying this until we get it in place and will bring it up a little bit further, maybe -35, 37. And that looks pretty good, I'm just adjusting it to we have it right about there it doesn't really matter because we're actually gonna get rid of these dots. But since I'm using them as a guide we might as well put our airplane in position. So now, that we've got those in place let's talk about how we use this Bézier curve plugin and I can go and point out here that if we go to our settings, and go to the JavaScript tag, we do not need to include anything about the Bézier plugin just like with the attribute plugin. There are some like I've mentioned where we do require it, but here it's not required. So we just have TweenMax and jQuery. If we go to CSS you'll notice I do have The Font Awesome CSS file included as well. So, let's start animating this. So the first thing I'm gonna do just like always, is I'm going to create a variable to store our object in. And I'm going to use the jQuery syntax to point to it. So, it will be pointing to an ID of plane. And once we have that variable created, we can Animating our airplane. So, we're going to animate it around those points and again, let's collapse our HTML for a now, let's scroll down so we can see where those points are located. So, in our JavaScript we're going to create a TweenMax.to animation, just like we've been doing. We're going to point to the object we're animating, which is the plane. Let's say we want it to animate in a circle over the course of five seconds. And then we'll have an object for our animation properties. So inside those curly brackets, I'll hit Enter to move the closing curly bracket and closing parenthesis down. And and this is gonna look a lot like the attribute plug in where we have a property and this time it's called Bézier instead of ATTR, : and then an object inside {}. And then after that object if we want other things related to repeating the animation adding using things like that we can do that. So, we can say comma go to the next line. And for this particular animation I want it to be constant at a constant rate. So, we're going to turn off easing so we'll set ease to linear.easeNone with a capital N. So then inside the curly brackets here for the Bézier property I'm going to hit enter to split those up so that we can read this a little bit better. And what we need here, this is about to get even more complicated, what we need here is a set of values and it's going to be stored in a property called values. So, the property name as values we'll type values colon space. And then those properties need to be in an array. So, we'll create an array I'm sorry using square brackets here. So after we type our square brackets I'm gonna hit enter to move the closing bracket down a couple of lines and then inside the square brackets will have a comma separated list of objects representing the different coordinates or the different points in our Bézier curve. And those points are going to correspond with where our point divs are here on the stage. So our first one is going to be at one fifty fifty. The second one at two fifty one fifty etcetera. So, each of these objects again needs to be inside curly brackets and we're there, each gonna have a left and top value or an x and y value. So the left value for first one, is gonna match our first point here which is the top point in our animation. So our left value is 150. And will put a comma between the left and top on, the top value will be 50. So after the curly brackets for that particular XY pair or coordinate will have a comma and then go to the next line. And then put another set of curly brackets for our next coordinates where our next coordinate is going to be where 0.2 is at a left value of 250 and a top value of 150. And you'll notice that I'm not typing out px here for pixels. If you just type the number value here without quotation marks around it then it will assume Pixels. So then after our closing curly bracket there, we'll type comma, go to the next line. Another set of opening and closing curly brackets and this time we'll set our left value to 150 and our top value to 250. And again, we're just following the points that we see over here in our CSS. And as we add points here, you'll see the The airplane is moving from one point to the next very easily. So, add another comma here. And then we'll go to our fourth point, which is at a left value of 50 and a top value of 150. So now we'll see it move around all four points. but it's not going to do exactly what we expect. It's not going to go all the way around unless we define the first point again, one last time. So after our fourth point, we'll type a comma, go to the next line and then we'll type in the first point again, which has a less value of 150 and a top value of 50. So now we should see it move all the way around from one point to the next, very good. So now outside the curly brackets for our Bézier after our ease: Linear.easeNone we can set this to repeat. And I'm going to set it to a value of -1 so that it just repeats over and over again. So once it gets to the end of the animation, it should just loop around and continue going and it does, very good. So then the next value I want to add here before we move on, is the auto rotate value because right now our airplane is pointing up and to the right. And it only really looks good when it's moving from point three back to point one otherwise it looks kind of weird moving backwards and sideways. So we do want to fix that and the way we get it to auto rotate is inside the object for our Bézier values. We're gonna add something else, we have our values here. But before our values that's still inside the object for our Bézier object. We're gonna create another property here called auto and then rotate with a capital R. And we're going to set that equal to true. And then we'll type a comma and then after that we'll have our values. So now you see that our airplane is rotating as it moves around but it's not quite pointing in the direction that we expect it to point. And the reason for that is if we turn auto rotate off for a second, we can see that this particular icon is actually arranged at a 45 degree angle it's pointing up and to the right. So, if we rotate that around it's going to assume that that is its natural position. However we're moving to the right first so we want our airplane pointing to the right, so if we rotate it about forty five degrees to the right, to start with then it should be good. And there's a way we can do that using this autoRotate value. So I've hit Cmd+Z to undo that deletion and instead of setting autorotate to true, I'm going to set autoRotate to a value of 45. What that will do is it will start the rotation, and you can already see it working. It will start the rotation at 45 degrees and then it will auto rotate based on that starting position. And that already looks a lot better. So if we wanted to now, we could take this point class here and turn off our background color. Or we could just set our display to none just to hide them for now, and we can see what her airplane looks like moving around in a circle. Now there's obviously more that we can do with this and we will do more as we move forward, but that's a good starting point. So thank you for watching and I'll see you in the next lesson.