KENT: Hi my name is Kent
I'm the creative specialist on the Google Web Designer team
and I'd like to show how to use masking in Google Web Designer
Masking means showing or hiding parts of an element
For example photos are rectangular
but we can add a mask to make it circular
and the effect may be easier to see
when you're not working with the plain white background
to emphasize the element is becoming transparent
rather than just being covered up
There is one big limitation to be aware of
only rectangle clip path masks work in all browsers
and the other mask types I'm going to show
have limited support in different browsers
So let's see what we can do with the rectangle mask
Here's the effect I want to create
I want to wipe away some text with a vertical barn doors effect
and this text can be dynamic
which becomes a pretty powerful effect on a custom ad campaign
To recreate this I'll start with a new blank file
and just give it a name
I'll add some images to my Library panel
bring in my background photo
and position it with the alignment controls
Then with my Text tool draw a text box
and key in my headline
Switch to the Selection tool
and in the Text panel choose a nice heavy font
and make it larger
Then I can use the CSS panel to tighten up the line height
so my text really fills the space
Now with it selected
I want to point out the clip path mask tool
and note three options rectangle oval and polygon
I choose rectangle which works in all browsers
and draw a shape
Notice when I release the tool
the mask is instantly applied
I've essentially drawn a window
through which I can see my masked element
Next in the Properties panel
I can make the mask tall enough to reveal the whole sentence
Now I'll set a couple keyframes by right clicking
and with my last keyframe selected
move the mask down to about the center of my text
and make its height zero
I usually add some easing
so right click linear, change to ease-out
and play to see the effect
Now let's talk about some advanced masking features
which again will not be supported in all browsers
First let's look at those other clip path options
I'll delete this mask
select the Oval mask tool
and hold down the SHIFT key to draw a circle
set a couple keyframes on the mask
On the middle keyframe in the Properties panel
make sure Width and Height are linked
and reduce the size to 0
Now I want to move it but it's hard to see
so if I hide the mask
and use the Selection tool with the Transform control
I see a little dot where my mask is
and can use my arrow keys to move it to the center of this o
Now I right click to remove the first keyframe
turn the mask back on
and in my last keyframe use the SHIFT key again
to constrain to a circle large enough to reveal everything
And just to make this easier to see
add one more keyframe and play to see the common iris transition
I've mentioned hiding a mask
You can hide any mask type in stage preview with this icon
and with the clip path selected
you'll see its outline even during animation
One thing to note
when I move the element, the mask comes with it
but when I move the mask, the element stays put
So if you want to animate something moving past a stationary mask
it's a little tricky and here's how to do it
First I'll delete the mask
then right click my element and select Wrap
which nests it inside a div
now add a mask to the wrapper
and if I double click into it
I can animate the contents without disturbing the mask
And here we see the effect
The last clip path mask is polygon
and with it selected I can change the number of sides
To set this up I'll delete the text
and bring in a different image
Now draw the polygon
again I'll make a couple keyframes
and use the Polygon tool to drag these vertices around
I can't add or subtract sides
but I can change the shape
and with this I can create some interesting effects
Now I'd like to show two other completely different types of masks
right-click any element to add an image mask or gradient mask
Let's do a gradient mask
With the mask selected
I can control the gradient in the Properties panel
click on the icon and I can control the start and end positions
as well as their values and I can also add new stops
the bottom slider controls the direction
I can also click on the middle icon to change to a radial gradient
and again set the start and end positions and values
I can drag down to delete stops
and click the right icon to reset and I'm back where I started
I can also drag these stops past each other
to reverse the gradient
Notice these gradient masks are by default set to the same size and position
as the masked element
but you can control this independently
for example to create an offset radial gradient
I'd like to point out these masks work on all elements
images divs groups components even video
I have a complex example here
a dynamic swipe gallery with a deeply nested group of text and images
I'll select the gallery component and apply a mask to it
then preview to see my dynamic data
animation and interactivity are all working as expected
The last type of mask I want to demonstrate is image mask
which means using a transparent PNG or GIF as your mask
so for example I'll select my photo
right click and select Add image mask
and we see the result
I want to point out my mask image has transparency in it
so a black and white JPG won't work
the mask image must contain transparency
I've used black but that doesn't matter
all colors will be ignored and only the transparency is being read in this file
One last trick is using an animated GIF for my mask image
and here we see that effect
Well that does it for masking in Google Web Designer
Thanks for watching!