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.
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.
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.
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.
Editing a mask
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
250. Our desired Radius is
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
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.
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.