(Below is one technique to mask content, here are a few more).
Most commonly, groups are useful to keep elements organized and aligned as one unit as you arrange your animation. Groups can also be useful to animate a 2 or more elements in the same way: instead of animating multiple elements with the same keyframes, the keyframes can be set on the group.
Masking is somewhat hidden feature of groups. Since each group has a rectangular shape, you can easily mask parts of the group by setting the ‘Content overflow’ setting for your group to ‘Hidden’.
With some creativity, you can create Rectangular, Circular, and Triangular masks using this technique:
Create a rectangular mask:
- Select one or more elements, and click ‘Group’ in the toolbar
- With that group selected, open the Metric inspector and set the ‘Content Overflow’ for that group to ‘Hidden’
- Modify the size of the bounding box for that group to mask elements within the group
Create a Circular Mask: You can create a mask in the shape of a circle by modifying a ‘box’ element and placing it over your masked element:
- Set the border-radius of the element to 500, and set the border thickness to 200.
- Make sure there is no fill color, and place your masked element behind this element
Note: When setting a radius on a group, it will not appear correct in Hype or in Safari due to a bug. Please turn off ‘Use Webkit Graphics Acceleration’ to fix this issue.
You can download this example here: masking.zip (26.8 KB)
Here’s another example of masking: