Responsive Layout: Animation – Google Web Designer
Articles,  Blog

Responsive Layout: Animation – Google Web Designer


LUCAS: My name is Lucas, and
I’m an engineer for Google Web Designer. In this video, we
extend previous videos on how to create responsive
documents using media rules. This video shows how to combine
animations and media rules. We start with a
simple document that has a vertical layout when
the viewport is narrow and a horizontal layout
when the viewport is wider. I’m now going to
extend this document so when it has a
horizontal layout and is sufficiently
tall, instead of having a single image, it has two
images that are initially superimposed, and then
separate with an animation. Because Web Designer
uses CSS3 keyframes to
represent animations, this can be encoded
using media rules. To start, I’ll switch
to the master content. And I will copy and
paste this image. And then, on a new image, I
will point to a different asset. And I’ll do that by changing
directly the asset’s path. And I will also have this
be hidden by default. Now I switch back
to media rules. And I will add a
breakpoint on height. We can see that we’re editing
the larger range of heights. So what I’m going to do
is I will add a keyframe for each of those two images. I will move them vertically
using the Translate tool. Like this. And then finally, I will set the
visibility of the second image so that it is, once
again, visible. And now I can scrub to
preview the animation. This animation is
responsive in the sense that together, the two
images stay centered even as the viewport changes size. However, if I move out of this
media rule to any other media rule, the animation disappears. And you can see this
in the timeline, where all the tracks are empty, unless
I am in the lower-right media rule. Now let’s say that I want to
have a default animation, where this image just fades in from
0 opacity to an opacity of 1. So to do this, in
the master rules, I’m going to insert a keyframe. For the base opacity,
I’m going to set it to 0. And at the keyframe, I
will set the opacity to 1. So in the master content,
we see that it fades in. And if we switch
back to media rules, we can see that in
each media rule, that same fading
animation occurs. There’s one. There’s the second one. And there is a third one. And the only exception is
that lower-right media rule, where I defined an
overriding animation. The only thing we
have to correct is that we redefined the base
opacity of that first image to be 0. So we’ll just
change it back to 1. And now we can see that
the animation is restored. You can always tell if
you have an animation that has overridden the media
rule, because its label in the timeline
will be highlighted. And if you click on
this label, a pop-up will appear that can be used to
remove the override animation and just use the base
animation if there is one. That’s all I wanted to say
about combining animations with media rules. Thank you for watching.

7 Comments

  • Jarit Jimenez

    – CUÁL ES ESA VERSIÓN DE GOOGLE WEB DESIGNER????? – PARA DESCARGAR ESTÁ
    LA VERSIÓN DE ABRIL DEL 2014 !!!!!!!! – TENGO INATALADA LA VERSIÓN
    1.5.4.0113 – CÓMO HAGO PARA TENER LA VERSIÓN MÁS ACTUALIZADA????? – LA
    QUIERO YAAAAAAA!!!!!

  • Alexigomez diseñoaudiovisual

    Buen día, tengo inconvenientes con un el código HMTL,
    Se crea una banner de 300 x 100 animado de 6 imágenes, es publicado y subido a la web aparece perfecto, PERO cuando decido realizar un cambio como mover la ultima imagen a la primera posición, en el momento de subirlo a la web, no aparece el banner, aparece en blanco, se ha revisado el código, las imágenes y todo es igual. PORQUE, sucede esto.? es por ser version BETA.?

    PDT: Decidimos copiar todo el código y pegarlo en un archivo nuevo, y función. PERO, porque debemos recurrir a un archivo nuevo para cada cambio que deseamos realizare a la animación?

  • Tina Nguyen

    Hi Lucas, is it possible to upload the working file so we all can test and see how you have done this? It would be great help! Thanks.

  • lucas sierra

    dude, it would be much more didatic if instead of showing those tools you applied them to a real banner… showing all steps.

Leave a Reply

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