Timeline Advanced Mode Overview - Google Web Designer

Hello, I'm Natalie,
one of the engineers that helps

build Google Web Designer.

This video is 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 one of two
timeline tools.

The other one
being the Quick mode timeline.

Many files will open by
default in Quick mode

and you can toggle between
them using this button

in the top-right corner.

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

We have a separate tutorial
for Quick mode

and this one will just focus
on Advanced mode, which

is the more complex but
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 at the end.

In this video, we'll
see how to build this

ad in Google Web Designer.

So let's do that
sliding image animation first.

The first step would
be to drag it on stage

and position it
how we want

at the
start of the animation.

So right there.

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

And you can see this
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 to define 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 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
to where I want

it at this in time.

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

And then finally,
half a second later,

I want it to slide out
of view.

So now, dragging the Playhead,
scrubs the timeline

and you 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.

That looks good.

And the next thing,

we saw in the finished piece
that the image

fades in at the very
beginning in addition to

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
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 it to be at 100%.

Next, let's add the text.

So, as we saw, there
were two text boxes.

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 is
to zero out

the opacity on this box -
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.

One thing you can do
is 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.

This can save you some
time with some animations.

And let's add the last one
where the 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.

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

and selecting Duplicate Layer.

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

to select all the keyframes
and move them 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.

If your keyframes
get this close together,

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

of the animation.

Now let's also
update the text.

Right now, I have
these two text boxes

one on top of the other.

If I click here now,
I might accidentally

edit the top one.

I'm going to
lock it so

I don't activate it.

And this will let me
edit the one underneath.

Now our animation
is almost done.

Let's take a closer
look at what's

going on between the keyframes.

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 other options.

If you right-click,
you'll see

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 bit and
then decelerates

before coming to rest, which
simulates real-world motion

a 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.

One other thing
we can do is,

rather than using a
predefined function

we can also create our own.

If you right-click and
select Easing options

you can customise
this Bezier curve

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

Click OK to apply it.

That just about
wraps up this tutorial.

For those interested, we
have other tutorials

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

That's it.
Thanks for watching.