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.