Google Web Designer – Animation Updates

Google Web Designer – Animation Updates


LUCAS: My name is Lucas, and
I’m an engineer on Google Web Designer. In this video, I’m going to
show some improvements we’ve made to our animation tools. When setting an
element’s position, it’s common to use left and top
if you’re creating a layout. But if you’re
creating an animation, it’s usually preferred to
use translation instead and this is for a
couple of reasons. First of all, translation
performs better, animating at much higher
frame rates than left and top, especially on mobile devices. Secondly, left
and top values are rounded to the
nearest integer at render time, which can lead to
jittering or jaggedness artifacts. To demonstrate that, let me
show you a simple example. Here we have two
elements that each move 200 pixels to the
right and 10 pixels down. The upper element
uses left and top, and the lower element
uses translation. To better see what’s
going on, let’s zoom in. I’ll move in by
a factor of three and re-center the elements. You can see that the left
top animation moves downwards in a jagged,
stair-step-like motion, whereas the translation
animation is smooth throughout. In light of this, we have
changed Web Designer’s default behavior to make it easier to
create translation animations. In particular, we have
changed the Selection tool, so by default when you
position an element, we apply the changes
to left and top if you’re editing a
layout, and to translation if you’re editing an animation. Let me show you how this works. I’ll start with a new file,
and I will add an image. Now, if I just move the element
with the selection tool, all the changes are
applied to left and top. In the Property Inspector,
if you see the translation channels, you’ll notice that
they are all still zero. However, if I then add a key
frame and move the element, this time the changes are
applied to translation. Previously, to do
this you would have had to first switch to
the translation tool, but now it can be done without
ever leaving the selection tool. So here’s the animation
that we created. And in code view, I’ll zoom in here so
it’s more readable, In code view, you can see
that the style rule only uses left and top but the key
frames rule uses translate 3D. If you don’t want
the default behavior, you can also configure
the selection tool to always apply position
changes to left and top or to always apply
them to translation. In addition to improving
how we animate position, we have also made changes
to how we animate size. First of all, Web Designer
now supports scale channels. In the Property Inspector,
there’s a new row for x, y, and z scale. So I can scale in
x, and y, and z. If you want it to scale
uniformly in all directions, you can click the lock
button on the left and then scaling one channel
will make a similar scale to all channels. In analogy to how
we treat position, if you resize an element
using the selection tool, we apply those changes
to width and height if you’re changing the
element’s static size, but if you’re creating
an animation using size, we instead apply those
changes to scale. So here’s the animation. And in code view
you can once again see that the style rule only
uses left, top, width, and height, but the key frames rule uses
scale 3D and translate 3D. Finally, I want to talk about
two simpler but still useful improvements that we’ve made. First of all, it is now
easier to create animations where an element rotates
through multiple revolutions. So I will create a
simple animation here. It’s two seconds in duration. The element moves
across the screen. And to make it
rotate twice, I’ll simply set 720 degrees
on the second key frame. And now when I play
it back, we see that it goes through
two full revolutions. Previously, this would have
required multiple key frames because key frames could only
be, at most, 180 degrees apart, but now any value is legal. Finally, in the
past, Web Designer let you play either an
animation once or to loop it indefinitely, but
now you can also have an animation loop
a fixed number of times. So for example, I’ll create
a simple animation where this car bounces up and down. There it is. And now in the advanced
mode of the timeline, I will select the
looping options and have it loop three times. And if I play it
back, sure enough, we see that it
bounces three times. That’s all I wanted to show
you about our animation improvements. Thank you for watching.


14 thoughts on “Google Web Designer – Animation Updates

Leave a Reply

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