Pivot Points - Animating in Alight Motion - YouTube

Hello! In this video we're going to learn about pivot points,

and what they do, how they work, and how they can be changed in Alight Motion.

We’ll apply what we learn about pivot points to create a social media Like icon,

as well as a Thumbs Up icon,

and we’ll see that both animation styles can be achieved by simply manipulating the position of the pivot point.

If you’d like to follow along, please download the sample projects in the description before continuing.

Let's get started!

What are pivot points?

Simply put, a layer’s pivot point is the point from where a shape or an object rotates or scales.

By default, the pivot point is in the center of the layer,

but we’re going to move it for this shape layer, so we can recreate the animation we saw in the intro.

Let’s tap the layer to select it, and then tap “Move and Transform.”

In this panel, we can edit the layer’s position, pivot point, rotation, scale, and skew.

Right now, if we go to the rotation property of the shape and apply some rotation,

you can see the shape is rotating from its center point, which is not what we want.

To edit the pivot point, simply tap on the position icon, and then tap on it again.

Tapping the position icon toggles between  layer position and pivot point editing panels.

To help you tell the difference between editing  position and pivot points,

we’ve placed text in the center of the controlpad.

While editing the layer position, you’ll see “Swipe here to move layer” on the controlpad.

We can confirm this by swiping around with our finger on the controlpad to move the shape in the preview.

Let’s undo this step, and then tap on position again.

Note that the text changes to “Swipe here to move pivot point”.

If you swipe on the controlpad now, you can see it is no longer moving the layer, but instead it’s moving the pivot point.

To match the intro, let’s shift the pivot  point to the bottom left corner of this shape.

Now, if we tap the rotation icon again, and apply some rotation,

you can see it is now rotating from the bottom left corner instead of the center.

Similarly, if we go to the scale panel, we can see the layer also scales from this same point.

Let’s undo to go back to the layer’s original size.

Now let’s get ready to start  animating by adding keyframes!

There are many types of keyframes.

In fact, every property, including position, rotation, scale, color,

and so on have their own keyframes that you can use to control them.

When you place a keyframe on a layer,

you’re telling Alight Motion that you want the selected property to have the value that you specify at the time of the keyframe.

Let’s add some keyframes to create our animation.

We’re going to make a scaling animation,

so let’s make sure that the scale property is selected.

Let’s first add a scale keyframe at the time we want to end our animation.

Then, let’s go to the beginning of the layer and reduce the size of the shape.

Like before, you can see it is scaling from the pivot point.

To make the motion more natural, let’s add this easing curve preset.

Easing curves change how the animation progresses over time.

You can learn more about them in our video on the topic.

At this point, if we play our animation, we can see the layer grow in size.

Let’s continue to improve our animation  by adding some rotation.

Tap on “Move and Transform“ then tap the rotation icon.

Place the playhead at the time seen on screen, and add a keyframe.

Now, go to the beginning of the layer and rotate it.

A second keyframe will be automatically created.

Press play once again how our animation is progressing!

Let’s finish this animation.

While the rotation panel is visible in Move and Transform,

tap Easing, and then tap the overflow menu.

Tap enable overshoot. This will allow our animation to shoot beyond the values set in the keyframes and then come back.

You can learn more about overshoot in our video on easing curves.

Let's add a little bit of overshoot to our curve. Try to make yours look like what you see on screen!

Now if we scrub through the timeline, we can see  the thumb goes up beyond zero and then comes down slowly.

If you play it, you can see that adding overshoot changes the feeling of the animation.

Let's take what we've learned and apply it to our other example.

In this case, we’ll move the pivot point to the bottom,

and then create some scale and rotation animation  with easing to create what you see on screen.

Like before, let’s tap on the layer, then Move and Transform,

and then tap on the position icon, even though it is already highlighted,

so we can edit the layer’s pivot point.

Let’s move the pivot point to the bottom of the shape, so that the layer rotates and scales from the bottom.

Let’s move the playhead to where we want to end the animation,

and tap on the scale icon and add a scale keyframe.

Now move the playhead back to the beginning of this layer and the scale down to almost zero,

and then add the easing curve preset you see on screen.

Let’s tap play to see our  scale animation in action.

Now let’s add the rotation.

Let’s move the playhead to the end of the animation again and add a rotation keyframe.

Now go back to the beginning and add some rotation.

If we add this easing curve preset, the layer will rock back and forth before settling at its final value.

If the animation is too aggressive, we can adjust  the easing curve to make it overshoot less.

With both of these animations, you can see how adjusting the layer’s pivot point created some interesting animation!

Try using this in your own projects,

and make sure to show us what you create by using the hashtag #AMPivotPoint.

If you have any questions, please make sure to ask in the comments!

We’ll do our best to help in any way we can!