Curviness & Rotation

[00:00:00]
>> Sarah Drasner: So let's talk about curviness first. Like how we make that curviness. So we can just use general coordinates and smooth out the motion between them. Because we had some coordinates right, xy, xy, xy. But it kind of softened that curve. It didn't just go right from one to the other.

[00:00:18]
I asked it to say soft and then it softened that curve. So we can either set the type parameter to soft, or we can have a little bit more control. GreenSock always gives us just a little bit more control if we want. So here's a CodePen demo I made that will kind of hopefully explain.

[00:00:36]
That's curviness set to 0, and that's set to 2. If I set it to 8, that's 0. What, what is going on? Okay, so set to 0, set to 2. All right, so when it's set to 0, it just goes between those coordinates, right? You saw that, it just kind of bounced between one and another.

[00:01:02]
>> Sarah Drasner: And then it goes crazy. And this one is kind of normal.
>> Sarah Drasner: All right, so what's happening here? So imagine that you have a rubber band and that you have the stakes in the ground. So I take the stakes, I nail them in the ground in these different points and I take that rubber band and I pull it taut.

[00:01:22]
At zero, it's fully taut. Then at one I let it out a little bit. Then at two, it's let out a little more until it's kind of curvy. But if I kept letting that rubber band out, what would end up happening is it would sort of unravel on itself.

[00:01:38]
And that's basically the concept there. So rather than it keep getting curvier in terms of making a circle, it's getting curvier. It has more, you're letting that rubber band fully out so it's kinda coming around like that. So that can be useful for certain types of motion. But it confused me at first, so that's why I made the pen like that, so that you can see it.

[00:02:04]
>> Sarah Drasner: Rotation, the CodePen embed transform origin thing is kinda funny. It's like, only when you're embedded will the transform origin be all broken. So let's talk about the rotation. Here's autoRotate true, autoRotate false. Both are actually useful. There are some things that you won't want to autoRotate. So if I have that false, there's some things in mechanical worlds that you don't wanna follow that path.

[00:02:36]
But you can see how if you don't have autoRotate true, especially for things like these little characters and stuff, that's not good. You don't want this little character, it kind of takes it from being believable to not believable. He's just not believable when his just [SOUND]. He's only believable when he's kind of following that curve.

[00:03:02]
So we can say autoRotate true or again, GreenTalk gives us all this options. Position parameter 1 (typically"x").. Position parameter 2(typically"y").. Rotation usually rotation but can be rotationX or Y if you wanna keep it on one axis. Number of degrees or radiance to add to the rotation at the onset.

[00:03:25]
And false, which is a boolean denoting whether you want to be using radians or rotation. Probably nobody in this room is at that level of geeky, but maybe you are, just in case you are, then that's an interesting one. The only one that I really use is this.

[00:03:41]
So I'll actually pass in all these values just to change this one. And the reason is autoRotate true looks really good if they're set along the path correctly. So if we go back to that little owl, whoever his name is, guy, he bends into the curve, do you see that?

[00:04:05]
If he had started off like this, which is actually how he is on the page, then he would've followed and then like rotating along but like rotating kinda strangely. He would've been, if he isn't turned, he would've been sure, rotating, but not correctly. So I need him to duck into that curve, and I do that through the amount of rotation at the onset, and that's that fourth parameter, that's that amount.