Timeline Advanced Mode Overview – Google Web Designer

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.

5 thoughts on “Timeline Advanced Mode Overview – Google Web Designer

  1. Hi Natalie, I have a question, why is it that when I drag an item from my library (this happens in your example as well with 'laptops.png') the filename in the timeline resets to 'gwd-image_#' is the idea to frustrate and confuse the users?

Leave a Reply

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