Timeline Easing and Preview Range  – Google Web Designer

Timeline Easing and Preview Range – Google Web Designer


CHIA-LING: Hi, I’m Chia-Ling
from the Google Web Designer team. Today, I will talk about
some features in timeline. The first one I will talk
about is the preview range. Preview range let you preview
the animation within a set of range and other time. You can see there
are two markers here that marks the preview range. And they are set to the
full length by default. To adjust that, you can do it by
dragging the handle to the time that you want. Once the preview range is set,
it will play within the range. And also, if you
set the loop mode, it will loop within
the range as well. If you want to set it
back to the full length, you can do it by either
dragging or double-clicking on the handle. Either way will set it back
to their default position. The next thing I will talk
about is custom easing. I have some keyframes
and animation set up, but it’s with the
default linear easing. To change that, I can
right-click on the span, open the context menu, and you
can see the standard easing available in here. You can select and
apply the ease. Or if you want to
customize your easing, you can right-click,
go to easing options, and open the easing dialog. To customize the
easing, you can do it by either dragging the
handles or by typing in. If you want to reuse
the custom easing a lot, you can Save As New Preset. Now, I will name it
as down and apply. Now if you right-click
on the span, you can see that down
preset that we just saved is available here. For other spans, if I want
to apply the down preset, I can select the span,
right-click, and select down. So now, the down preset is
applied to all the spans that I just selected. Similarly, I will do
it for another preset that’s called up. And apply. Also, I will select
the spans that I want to apply the new easing. Right-click and select up. So now, I have the spans that
has the easing with either down or up. If you want to rename
or remove a preset, you can, again,
right-click on the span. Go to easing options and
go to the easing dialog. To rename a preset,
you can do it by either double-clicking
on the name or click on the pencil icon. I will rename it to foo. Or if you want to
remove a preset, you can click on a trash icon
and it will remove the preset. Keep in mind, whether you rename
or remove a easing preset, it doesn’t change the
easing that are already applied to the animation. It only changes the quick access
to the easing on the context menu or the easing dialog. So the up preset
is no longer here, but the animation is still
applied when you preview it. And that’s all I have
for timeline today. Thank you for watching.


10 thoughts on “Timeline Easing and Preview Range – Google Web Designer

  1. No puede ser!!!!!!

    Hacen pinches tutoriales para retrasados mentales siendo que se puede explotar mucho pero mucho más esta herramienta!!!

    Si ésta es la única opción en lugar de Flash, hagan algo que sorprenda, no sus estupideces!!!

Leave a Reply

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