Motion Path Editing - Google Web Designer

Hi. I'm Chia-Ling from
Google Web Designer.

In this video, I will talk
about motion path editing.

For an introduction
to motion paths,

please watch our previous
video, 'Motion Paths Overview'.

If you select the
Motion Path tool,

you will see the
'Transform control' tick box.

Tick the box to enable
transform control.

With it enabled, you can
move, resize or rotate

a motion path.

Here I have an element with
two keyframes and a motion path

that goes from the upper left
to the lower right.

To move the motion path, you can
simply click and drag to the new location,

or you can use the arrow keys
to nudge the motion path by 1 pixel,

or hold the 'Shift' key and
press the arrow key to shift by 10 pixels.

To resize, click and drag
any of the 8 handles.

To resize with a
fixed aspect ratio,

hold the 'Shift' key
while dragging.

To resize about the
centre of the motion path,

hold the 'Alt' or 'Option'
key while dragging.

You may also drag a resize
handle over the opposite edge

to flip the motion path.

If you wish to resize along any direction
other than horizontal or vertical,

you may change the
orientation of the resize box.

To do so, you can use
the text field here,

and enter a certain angle.

Or you can press the 'Alt' key
or 'Option' key,

and the right arrow key
to rotate the box clockwise,

and the left key
to rotate anticlockwise.

Please note that
this only changes

the orientation of the box;

the motion path itself
does not rotate.

Once you're satisfied
with the box,

click and resize the motion path
along the desired direction.

To actually rotate the motion
path, click and drag the ring.

You may also move the
centre of the ring

to change the
origin of rotation.

If you want to reset
the rotation origin,

or the orientation of the box,

you can double-click
the centre of the ring.

The box and the origin will go
back to their default settings.

And that's all I have for today.

Thank you for watching.