Timeline Keyframe Scaling – Google Web Designer

Timeline Keyframe Scaling – Google Web Designer


NATALIE: Hi. My name is Natalie. I’m a software engineer on
the Google Web Designer team. And in this demo, I’m going to
show you a new feature that’s now available in the
Advanced mode timeline, which lets you change the
duration of an animation that you’ve already created. So in this example file,
I have several layers that fade in sequentially. It looks like this. And play it through. Pretty simple. So right now, this
animation takes about a second and a half. And so let’s say that I’d
like for it to take more like three or four
seconds, or maybe I’d like to compress it down
and have the animation be done after 500 milliseconds. This is now pretty
easy to do right in UI. You select your keyframes. You hold down Shift
on your keyboard and click a keyframe on the
right end of the selection and drag to set the new length. So I can stretch it,
and I can compress it. Let’s say I drop it
right around there. And you can do this for
any selection of keyframes, not only entire layers. So for example,
if for some reason I’d like to stretch,
or compress, or change only the keyframes on the end
here, I can do the same thing. Just select them, hold
down Shift, and drag. And non-contiguous
selections are also OK. So I can select keyframes in
a configuration like this, and this will also work. You can also scale keyframes
in the other direction if you’d like to keep
the right end fixed and extend the
length to the left. All you have to do is, once
you’ve selected your keyframes, hold down Shift and
begin dragging somewhere on the left half
of the selection, instead of on the right. And the rightmost
keyframe will stay fixed, and the length will
change to the left. And remember that you can have
some pretty precise control over the selection. As we’ve seen, you can
use the Marquee tool, you can click keyframes
individually to select them. And you can also combine
clicking keyframes or using the Marquee tool with holding
down the Command or the Control key to add or remove
keyframes from the selection. So for example, I may have
selected some keyframes with the Marquee. I can hold Command or Control
on the keyboard, drag some more, select some more to add
them to the selection. And I can also, while
holding Command, I can deselect some keyframes. That’s it for now. And thanks for watching.


2 thoughts on “Timeline Keyframe Scaling – Google Web Designer

Leave a Reply

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