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
You can download this example here: masking.zip (26.8 KB)
I am new to web design, to Hype and to work with HTML5.
About masking, is it possible to work with HTML Canvas into Hype? I have seen some examples of creating masks with many different shapes.
Hype does not export canvas elements. You could add a canvas element in Hype by editing the inner html of an element, but you would need to write all your own code to draw and animate.
Animating masks is tough when you want the actual element itself to stand still. In that sense, it’s a matter of trial and error as you keep moving the element, AND moving the group mask that contains the element.
I was just looking through @danials new post for [howto-different-masking-techniques][1]
And @h_classen brilliant [Responsive-reveal-of-a-picture technique][2]
And wanted to see if you can get something similar in just using pure Hype.
The Scene uses Scaling with the built in Scale controls.
The Images are set to scale width and height using the inner pinning springs. (Metrics)
And the Handle Group is pinned to all four sides. ( This keeps it in the correct position )
The Handles control a reveal timeline that sets the width of the Foreground images group and also moves the handle in step with the drag.
You can but admittedly it is not as smooth.
Also it would be great if you could determine width sizing from Left to Right. ( Hence this goes from Right to Left)
I am posting this here because it is using the Content Overflow that Daniel demonstrates but shows you a dynamic use.
I just realised to get the slid to go from left to right. We just need to swap the images around so that the blurred image is below the sharp image.
Then have a scene load that take you to the end of the reveal timeline, so you start from the end and work back to the start. The on drag Action for the timeline still drags in revers direction
I have been trying to animate this without success. I can move the bounding box and see it mask my grouped items. But, when I go to animate the bounding box of the group, the bounding box doesn’t animate. Instead, the objects inside the box move. What am I doing wrong?
Hi DBear, thanks for looking. Your example would work for a clear background, but if I wanted a texture or anything in the back it wouldn’t be the best way.
I have attached the file I am playing around with. I have the bounding box masking part of the image and I want to animate it to reveal more.
I narrowed down where I am having problems. If I scale the bounding box to the right, the size of the bounding box animates perfectly. If I scale the bounding box upwards, then the objects move. I noticed for resizing it widthwise, only the Size properties get keyframes created. When I animate the bounding box vertically, the size changes but also the ORIGIN gets a keyframe, and that seems to be the problem.
So here are the steps I am taking with this file.
Works:
Set timeline to 0 seconds. Hit animate button.
Move timeline to 2 seconds. Scale right side of bounding box to the right revealing more.
Turn animation off. Test movie. Works.
Doesn’t work
Set timeline to 0 seconds. Hit animate button.
Move timeline to 2 seconds. Scale top side of bounding box up revealing more.
Turn animation off. Test movie. The car and driver are now shifting and the Origin has new keyframes.
Seems like a bug to me that it would work differently for each case. Why is the origin getting modified when I scale the bounding box up on animating, but not when I scale it to the side?
Hi Jessica,
I never really got a solution to this. I was just playing around with Hype and I just moved on to something else. Sorry I can’t be of more help.
Hi @jessicatwilbeck could you give an exact description of what you’re trying to achieve with masking? I’ve found several work arounds for masking but they’re very case specific
Sure! I’m trying to make a simple arrow look like it’s being drawn from point A to point B- starting by moving up, then to the right, then back down (like the top of a square). Basically, if I scale the bounding box to the right, the size of the bounding box animates correctly. If I scale the bounding box upwards, then the objects inside the bounding box move. I’d love some different suggestions for simple masking techniques.
Hello!
I’m new to Hype and learning quickly how much more awesome it is than Adobe Animate.
I’m trying to animate the mask of an image and am having trouble. I’d like to have the bounding box start at 0px high then animate to 500px high (bottom to top) without the content inside moving. When I animate it, the image inside moves as well.
How can I lock the image position and only move the mask? I’ve looked at the examples folks have posted and can’t find what I’m doing wrong. Any help is greatly appreciated.
An interesting aspect to consider is “when” you “group” your Object(s) to use the masking technique ( overflow:hidden ).
In the attached example there are three separate lines of text and each animate from stage left. The center one was created as a Group at keyframe 1. The others were “grouped” at their final location. This creates a case where the group based mask is not where it’s needed. It’s important to know when the Group is created as it also sets its envelope location, which is used in masking.
I just wanted to post this an FYI as there is no keyframe or other indicator that notes the grouping event even though it is significant as to when the group is created.
