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 key frame

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 centred 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 key frame.

For the base opacity,
I'm going to set it to 0.

And at the key frame, 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.