LUCAS: My name is Lucas, and I'm an engineer
on Google Web Designer.
In this video, I'll show how to animate objects along curves
using motion paths.
Previously in Google Web Designer,
if you wanted to animate an object's position,
it could only travel along a straight line, like this.
Now you can have it move along a curve
by simply grabbing any point on that line and dragging it.
We call the resulting curve the motion path.
You can edit the shape of the motion path
by moving any point on the curve's interior
or by moving either of the endpoints.
You can also have the object face along the motion path
as it travels by going to the Property Inspector,
and then the motion path section checking orient to path.
So here's what that looks like.
And here is the final animation.
To get more control over the shape of the motion path,
you can use the motion path tool.
With this tool, in addition to moving the curve directly,
you can also move tangent controls.
And by changing the tool mode, you
can insert control points, like this.
And you can delete control points, like this.
By default, when you move a tangent control,
the opposite control also moves to preserve
the smoothness of the curve.
If you don't want this behavior, and you
want to add a corner to the curve,
then you can hold down the Alt key,
if you are on Linux or Windows, or the Control
key, if you are on Mac.
You can get a similar effect by double-clicking on a control
point.
That will shrink the tangent handles down to zero length.
You can then double-click again to re-extend the handles.
Finally, if you want to create a looping motion path,
you can simply grab the endpoint and drag it towards the start,
or vice versa.
And they will snap together.
So here is a smoothly looping motion path.
To control the timing of the animation,
you can use the timeline.
And to demonstrate this, I'm going
to go back to a simpler version of this path.
That's just the bump.
So well, we adjust these tangents
so that creates a little hill like this.
OK.
Great.
So right now, the timeline has the second key at two seconds.
So if I play the animation, it takes two seconds to complete.
I can slow down the animation by moving that key out to, say,
three seconds.
And now the object travels along the same curve,
but at a slower speed.
You can also add acceleration and deceleration
by changing the easing function between the keys.
So I will pick an easing function here
that causes the object to gradually come to a stop
at the end of the path.
You can get more complicated effects by using multiple keys.
So for example, I will add in a second key here,
and I will move the object out a little bit.
And then adjust the path so it's smooth.
And then finally, I will change the initial easing function
so the car accelerates from a standstill.
So with these changes
we now see that the car accelerates over the hill,
and then travels at a constant speed.
Motion paths animate using x and y translation.
So if you edit x and y translation,
you edit the motion path.
For example, if I go here and I change x to a different value,
I will see that I get both a key in the timeline,
and a new control point on the motion path.
If I then edit, say, y, or I even go into the Selection tool
and I directly move the object, that control point now moves.
All the other transform channels, however, you
see translation, rotation, and scale,
those all can be animated independently
of the motion path.
So to illustrate that, let's say,
if I go back to the original path shape
that I want the car to shrink in size as it goes over the hill.
What I can do is,
I can go to the end of the animation.
Then with the Selection tool, I can shrink the car down
to make the animation happen over
the entire extent of the time range.
I'm just going to remove the middle Scaling key.
And now if I go back and I play the animation,
I see that it's the same as before.
But this time, the car shrinks as it moves over the hill.
I'd like to conclude by saying a little bit about how
we represent motion paths internally.
Like all other animation generated by Google Web
Designer, motion paths are entirely constructed using CSS.
Now, CSS cannot be used to exactly represent a motion
path.
So instead, we have an optimization process
that approximates the motion path to subpixel accuracy,
while minimizing the amount of CSS
that we generate to minimize the storage footprint.
So in the Property Inspector, you
can see the tolerances that we use for the optimization.
We always stay within half a pixel of the ideal position
and within 1 degree of the ideal angle.
Now at author time, to keep interactivity,
when we run the optimizer, we use
settings that cause it to finish quickly,
but perhaps using more CSS than is strictly necessary.
If you want to squeeze out some space,
then you can rerun the solver with settings
that take a bit longer to complete,
but that usually improves the amount of CSS that's
generated, by clicking this button labeled Optimized Curve.
So right now, the estimated compressed size is 346 bytes.
And if I click this button, then it goes down to 300 bytes.
That's all I had to say about motion paths.
Thank you for watching.