schlooie
January 25, 2017, 9:41pm
1
What is the easiest/quickest way to animate a mask/unmask on an element?
jonathan
January 28, 2017, 1:25am
2
For simple clipping, you can put your element inside of a group, change the group's Content Overflow settings in the Metrics inspector to hidden , and then adjust the bounding box of the group to mask off part of the contained element.
See this post:
(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…
There's a few other interesting methods here:
@ralphiedee2016
Below are some more links to add to what @michelangelo posted above - discussing SVG & CSS clipping. An SVG path can also be animated (see Dirk’s link below)… I have not worked with any of these in Hype.
Sara Soueidan’s site here & Dirk Schulze here .
And if You are willing to descend into the stygian depths of Kluge You can somewhat easily create a triangle and other basic shapes in Hype. (I think that is what You wanted it really was not clear in your post You were talking…
More complicated clipping paths can be done manually with SVG, but aren't built into Hype. Here's a post that has some of that info:
Hi. The last technique works well but is there any way to do basically the same thing but run animation behind that mask? Right now the background is limited to the “masks” solid colour.
2 Likes