Masking Layers

Add mask behavior to layers and their underlying children.

Masking in Origami is a lot like other design tools, with the added bonus of being able to use masks to create advanced interactions and animations. We are going to prototype Messenger photo radius changes, which occur on lightbox open and close. If you haven't already, download the tutorial files.

Setting up

We have already set up Image Container to change its Scale and Position properties to turn into a lightbox on Tap. The last thing we need to do is set a change in rounded-corners on Image itself. The Image needs a Radius of 28 when within-conversation, but a Radius of 0 (no Radius) when expanded to a lightbox.

This [Image](../../documentation/patches/builtin.layer.image.html) should have rounded corners within the conversation thread.
This Image should have rounded corners within the conversation thread.

Preparing a mask layer

Image layers do not have a Radius property. To create a radius on the Image layer, we will need to use as layer type that does have a Radius property and use that as a mask.

Rounded Rectangle is a layer type that does have a Radius property. Click the New Layer button and type to find Rounded Rectangle. Press Return once it appears.

Place the new Rounded Rectangle layer in the same Group as Image, below the image itself. This is because our Image layer will be masked onto the Rounded Rectangle.

Creating a mask

To mask Image, we need to select the layer we want to use as a mask (Rounded Rectangle) then navigate to Layer > Use as Mask M.

Remember to have the [Rounded Rectangle](../../documentation/patches/builtin.layer.roundRect.html) layer selected.
Remember to have the Rounded Rectangle layer selected.

Editing a mask

Image, directly above the Rounded Rectangle, is now masked to the shape of Rounded Rectangle. Changing any of the Rounded Rectangle properties will visually reflect on Image too.

Change the Rounded Rectangle Size and Position properties to match Image, since would like them to be the same. The Size property of Image is 375 by 250. Our desired Radius is 28.

If you have followed correctly, the Position property should be already at `0`.
If you have followed correctly, the Position property should be already at 0.

Transitioning with a mask

We would like the Radius to change to 0 when Image is receives a Tap and transitions to a lightbox. A Transition patch has already been prepared in the Patch Editor, so that the animation begins at 28 and ends at 0.

Our top-most [Transition](../../documentation/patches/builtin.transition.html) patch has values already added.
Our top-most Transition patch has values already added.

The last step is to connect the Transition patch output to the Radius property of the Rounded Rectangle. Go ahead and connect this. The Radius of mask now changes, which in turn changes the Image layer masked to this.

Connect the [Transition](../../documentation/patches/builtin.transition.html) output to the Radius property by clicking and dragging to the Layers panel.
Connect the Transition output to the Radius property by clicking and dragging to the Layers panel.

If your prototype does not work properly, double-check the order of your layers, and make sure you have your Rounded Rectangle used as the mask. Inspect the Layers panel to see which layers and masks are affecting each other, indicated by symbols.

The downward arrow shows the layer *being* masked. The corner-glyph shows which layer is acting as the mask.
The downward arrow shows the layer being masked. The corner-glyph shows which layer is acting as the mask.

Next Up

Introduction to Loops

Automatically repeat layers to create grids, tables, and more.