Timeline Advanced Mode Overview - Google Web Designer

NATALIE: Hello.

My name is Natalie, and I'm
one of the engineers that helps

build Google Web Designer.

And in this video,
we're going to do

a walkthrough of how to
create animations using

the advanced mode timeline.

The Timeline panel is located
at the bottom of the workspace

by default. This is actually
one of two timeline tools

that we have-- the other one
being the Quick mode timeline.

Many files will open by
default in Quick mode,

and you can toggle between
them by pressing this button

in the top right-hand corner.

So this is a Quick mode, and
this is the Advanced mode.

We have a separate tutorial
covering Quick mode.

And this one will just focus
on Advanced mode, which

is the more complex but,
also, the more powerful

of the two tools.

As a tutorial exercise, I've got
this short little animated ad,

which has a sliding
image, two text

boxes that fade in and out, and
a logo that appears at the end.

And in this video, we'll
step through how we can build

this ad in Google Web Designer.

So let's take care of that
sliding image animation first.

The first step would
be to drag it on stage

and position it the
way that we want

it to appear at the
beginning of the animation--

so right around there.

And later on, we'll have
it slide over like so.

And you can see that this little
track appeared in the timeline.

This is a timeline
layer, and this

is the UI in which we'll
lay out the animation

for this object over time.

The basic idea behind
creating animations

is we're going to be
defining keyframes, which

are waypoints in time where an
element has specific property

values and then defining how
and how long the transition

between those values.

So to make this image slide,
we'll make several keyframes.

We want it to hold it in
place for about a second.

So I'll place the
keyframe at one second

by right-clicking and selecting
Insert keyframe then one more

half a second later.

And then, at this
keyframe, I'm going

to slide the image
over to where I want

it to be at this point in time.

Then I want this image to hold
it in place for another second.

And then finally, a
half a second later,

I want it to slide out
of view completely.

So now, if we drag the Playhead,
you can scrub the timeline

and get a preview
for your animation.

And you can also press the Play
button in the left-hand corner

here to get a preview
right on stage.

And that looks good.

And the next thing--

we saw in the finished piece
that the image actually

fades in at the very
beginning in addition

to the sliding over later.

So let's do that
fade animation next.

I'm going to select all the
keyframes using the Marquee

tool and slide it
over to make room

for the fade-in at the
very end and insert

a new keyframe at time zero.

And at this keyframe, we'd
like for the element's opacity

to be zero.

And at all the other keyframes,
we'd like for it to be at 100%.

Next, let's add the text.

So as we saw, there
were two text boxes,

and they faded in one after
the other, as the image slides.

So let's create
the first text box.

So the first text box
should fade in, then

stay in place over this
period here, and then

fade out as the image slides.

The first thing to do
would be to zero out

the opacity on this box because
that's the starting state.

Then we can create a
keyframe at half a second,

set the opacity to 100%.

At a second and a half, we
want it to still be 100%.

And then, at two seconds,
we want it to be 0% again.

So one thing you can do
is just insert a keyframe,

much like we've done before.

But you can also take advantage
of keyframe duplication.

If you hold Alt, you can
create a clone of a keyframe

and drag it to a different time.

So this can save you some
time with some animations.

And let's add the last one
where the text box fades out

completely.

You can take a preview now.

Perfect.

OK.

And the second text box is
actually pretty much identical

to the first text box,
just the text is different,

and it comes in after the
first one's faded out.

So I'm going to save
myself a little bit of time

and just duplicate
this layer together

with the animation by
right-clicking it

selecting Duplicate Layer.

And then, once again, I can
use the Marquee selection

to select all the keyframes
and move them to where

this animation should be.

I'm going to adjust these
keyframes where the first text

box fades out and the
second one fades in

so they don't crossfade.

And any time your keyframes
get this close together,

you can use the zoom slider
to get a more high-res view

of your animation.

So now let's also
update the text.

So right now, I have
these two text boxes

one on top of the other.

So if I click here right
now, I might accidentally

edit the top one.

So I'm going to go ahead
and lock it so that I

don't accidentally activate it.

And this will let me
edit the one underneath.

So now, our animation
is pretty much done.

Let's take a closer
look at what's

going on between the keyframes.

You can see that, between every
pair of keyframes, it says Linear.

This refers to the
CSS easing function,

which is used to compute
intermediate values

between every pair of keyframes.

So linear means that the values
change at a constant rate.

We have some other options here.

If you right-click,
you'll see that you

have available all the standard
easing functions specified

in the CSS spec.

So particularly
for this transition

where the image slides
from one half to the next,

it can be good to choose
a different easing

function, such as ease-in-out
in which the motion accelerates

a little bit and
then decelerates

before coming to rest, which
simulates real-world motion

a little bit more closely.

I'm going to limit
my preview area

by dragging these yellow handles
just to this transition here.

And I'm going to
set Preview on Loop

and run the preview
just over this area

so I can debug that transition.

And that looks good.

And one other
thing we can do is,

rather than using one of
the predefined functions,

we can also create our own.

So if you right-click and
select Easing options...

you can customize
this Bezier curve

to be anything that you like
and save out a custom preset,

and click OK to apply it.

So that just about
wraps up this tutorial.

For those interested, we
have some other tutorials

going more in-depth on other
animation-related subjects.

And that's it for now.

And thanks for watching.