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.