Timeline Quick Mode – Google Web Designer


NATALIE: Hello, my
name is Natalie. I’m one of the engineers that
works on Google Web Designer. And in this video,
we’re going to take a look at how to create
animations using the Quick mode timeline. The Quick mode timeline is
one of two animation tools that we have. A lot of files will open
in this mode by default. And the other tool is the
Advanced mode timeline, which you can access by
clicking this toggle button in the top right hand corner
of the Timeline panel. And we have a separate
tutorial which will focus on Advanced
mode specifically. And in this one, we’ll
just talk about Quick mode and some things that
you can do with it. Let’s step through an example. I have this list of buttons. And let’s say that I’d like
for them to fly in one by one from the left side. So the first step
is to position them where I’d like for them to be
at the beginning, which is off the page on the left side. Then I’m going to click
this Plus button down here in the Timeline panel, which
will add a new scene after half a second. This is something we’ll be
able to customize later. In this scene, I’m going to
rearrange my elements the way I want them to be at a half
a second in the animation. So I want just the ABOUT
button to be visible on page. And then so on and so forth. And you seem to have the
Gallery button fly in from the left side. And a third to have
the CONTACT button fly in from the left side. And so now we have an animation. You can verify this by clicking
each of the thumbnails, which will show you a preview of
what the animation looks like at that point in time. Or you can also
click the Play button to get a live preview of
your animation on stage. And this little Loop button
will let you preview repeatedly, so you can debug your animation. So as we saw, the 0.5 between
every pair of thumbnails represents the duration
between every transition, between every two scenes. If we click this, we can
customize this duration to be longer or shorter. Let’s say I want this one
to be one second long. And we can also
adjust the easing. So this is the
Bezier curve that’s used to compute intermediate
values for all the animations between every pair of scenes. So we have all the standard
CSS easing functions available. You can cycle through
them one by one. So ease in out is a good one as
it simulates real world motion pretty well. So if we preview now, we can
see the transition between third and fourth thumbnails uses
the ease in out transition and takes about one second. So this is an overview
that should hopefully get you started with building
some animations using the Quick mode. It’s pretty simple
to use, but there will be a limit to some of
its capabilities for very complex animations. So for example, if you’ve
got many elements that are animating
concurrently and you want to be able to edit each
animated element’s key frames and transitions individually,
if you want to create things like custom easing functions or
be able to add interactivity, those are all things
for which you’d need to venture into the
Advanced mode timeline for. And we have a
separate tutorial that goes more in-depth into that. That’s it for now. And thanks for watching.

Leave a Reply

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