Motion Paths Overview  – Google Web Designer

Motion Paths Overview – Google Web Designer

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.

17 thoughts on “Motion Paths Overview – Google Web Designer

  1. One question pleas:. Is there any option of insert any element on the stage NOT at the first frame. I mean, for example if I make a car moving from left to right and the movement starts at second ten, I would like not to introduce the car symbol until that exact moment. Now I have to insert it at frame 0, set opacity to 0 and in the second 10, set the opacity to 1. Is there any way?

    Thanks a million.

  2. I have a Chromebook only. What would be the web app that comes closest to doing what this program does? Thanks!

  3. Hi Lucas… Is there a new version of GWD? because I don't have that motion path in the properties inspector.

  4. I have an older static index page on my site. Can I use the great GWD features to re design and replace my old index page? My present browser compatibility is really bad. Mike at Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *