3.2 Bezier Properties

Hello, and welcome back to Advanced Animation with GSAP plug-ins. In this lesson, we're going to continue with our discussion of the Bezier plugin. And I will include the starting pin here in the course notes. For now, let's go ahead and fork this starting pin and start with a new version. So once you've forked that, we're gonna jump over to our JavaScript. And we're gonna talk about a couple more properties that we can include. We've already talked about the values which determine where the anchor points are for that animation. So he's going to be animating from this position, from 150,50, to the second position, to the third position, etc. We've also talked about the autorotate property which is how we're able to see our airplane turning in the direction that it's moving. And I wanna talk about a couple more properties. One of the properties I want to talk about is the type property. By default, the type property is set to a value of thru and that needs to be in quotation marks. Let's try that again, there we go. By default, it's set to a value of thru which means it's gonna be moving through and let's get rid of this display none here in the CSS. It's gonna be moving through the points that we are animating through. And again just to point out, these divs that have the points and then those don't have to exist, those don't have to be there. I just put them there so that we could kind of plot out the course and so that you could see what we're doing as we're animating. So we've plotted out the course and stored them in this values property. But I wanna talk about this type property for a second. So again the default value is thru, and if we jump into the GreenSock website and go to Support > Docs > Plugins > Bezier plugin. And here you can see a little bit more Information on your different options. So as we can see, at the very top it's already talking about the type property here. And as we can see thru is the default property. So it naturally moves through the points that we lay out for it. Now there's another property called curviness which we'll talk about in a moment that determines just how curvy the path is that it takes. If the path isn't curvy at all, then it just moves in a straight line from one point to the next. So obviously we've seen that it already has a little bit of curviness to it. But another option we have for this type property is soft. And then we have quadratic and cubic. Now if we choose soft it kind of works like thru, but it doesn't necessarily move through each particular point or each particular anchor. Instead, it's kind of attracted to each point, kind of like a magnet, but it doesn't necessarily move all the way to that point. So it's good for kind of nudging our animation in a certain direction but again, it won't go through that point necessarily. So if we were to change our type. Let's go back and change our type to soft. Let's take a look at how that changes the path of our airplane. So we can see that it's still moving in the same general path but it's not quite as predictable. You'll see when it gets to the end and starts over, there's just a sudden very sharp curve. So that one's a little bit less predictable. But as you can see, before it gets to that point where it's looping around, it actually moves really smoothly and it turns really smoothly along that path. So that soft option is a nice option as long as you don't have to loop. So another option that we have is this quadratic option, and both of these options, the quadratic and cubic, are a little bit more complicated than what we're going to get into. They actually require us to have control points in addition to our anchors. So it really helps us to really, really fine tune the curves themselves. So you'll have just as much control over your curves or over the path of the animation as you would in Illustrator. So you can drag out those control points as far as you want to between each anchor. So the quadratic type allows you to have one control point between each anchor and then the cubic one allows you to have two control points. So that involves a lot more math than I really want to talk about in this particular course. For now we're just going to focus on thru and soft now. So these are both very viable options. The thru option will just make 100% sure that your object does pass through the anchor points that you define. Soft will simply pull them towards those anchor points, but they won't always necessarily go through those anchor points. So let's talk about curviness as we jump back into our file. So we have autorotate we have type equals soft. Let's go ahead and set that type back to thru just by getting rid of that property altogether. We'll just let it go back to the default value of thru. And then I'm going to define another value, again called curviness. I'm gonna set that to 0 and we'll see what happens. Now when it refreshes you can see that it's moving in straight lines from one point to the next. So for this particular animation, probably not the best idea because that looks really painful to suddenly turn at a 90 degree angle. I'm sure everybody in the plane would not appreciate the pilot if he did that. So we probably don't want a curviness of 0. Now if we jump back into our file, and we can see a little bit more information on the curviness option. So as you can see as we just typed in, if you type in a 0, then you're gonna be moving in straight lines. 1 is gonna be normal curviness which is the default value. 2 will make it even more curvy. So, you can use different values, you can even use values in between 0 and 1 and 1 and 2, etc. So let's jump back into our file, and let's play around with that. So if we set our curviness to 1, it's gonna go back to pretty much the default value that we saw before. However, if we bring that up even more, if we bring that up to 2, we'll see it moving in almost a perfect circle. Now we can see as it gets through each corner, there's a little bit more turning than there is. So I mean, it's not a perfect circle that it's moving in, but you can get the basic idea. So you can play around with that value until it looks nice and smooth, until it looks like what you're going for. But those are some of the properties that you have available to you when you're using the Bezier plugin. Thank you for watching and I'll see you in the next lesson.