Masking Elements by using Content Overflow & Groups

[Daniel]

(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:

1. Select one or more elements, and click ‘Group’ in the toolbar
2. With that group selected, open the Metric inspector and set the ‘Content Overflow’ for that group to ‘Hidden’
3. 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:

1. Set the border-radius of the element to 500, and set the border thickness to 200.
2. 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:

Responsive reveal of a picture

link drag the arrow to reveal the hidden picture i made it for usage in our dps-app: create a weboverlay of any size as it is responsive. drop 2 pictures to the hyperesourcesfolder (foreground.jpg, background.jpg) choose the html, set to autoplay and allow user interaction reveal.zip (895.0 KB)

And

Free Hype Templates

[image] This week’s template shows how to use Groups to hide / show content. There’s no programming necessary. Only basic Hype features are used. https://photics.com/free-template-tuesday-10-tumult-hype-reveal/

[gasspence (Greg)]

You can also use “Grouping” to create a triangular mask or shape by adjusting the border widths and colors of the group container.

Suggestion: more basic shapes

I wouldn’t say that Flash has “shape tweens” which I think are amazing and would love to add in the future.

triangle-group.hype.zip (12.3 KB)

[Teo]

Hi Daniel,

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.

Many thanks in advance

[stephen]

is it possible to work with HTML Canvas into Hype?

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.

[andrewk (Andrew)]

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.

[MarkHunte]

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.

reveal2.hype.zip (913.1 KB)

---

Update.

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

reveal3.hype.zip (873.7 KB)
[1]: Howto: Four Different Masking Techniques
[2]: Responsive reveal of a picture

[michelangelo (Freelancer)]

I made the same thing time ago.

this is the App ( english and italian, free )

[mcstampfunk (Josh)]

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?

[DBear]

I’m guessing that you are animating movement of the bounding box?

I would animate a rectangle the same color as the background to move and reveal the elements below

Example:

revealBackground.zip (15.2 KB)

If you supply a document we could look at it in more depth perhaps give you a specific example or fix what you are trying to do

[mcstampfunk (Josh)]

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:

1. Set timeline to 0 seconds. Hit animate button.
2. Move timeline to 2 seconds. Scale right side of bounding box to the right revealing more.
3. Turn animation off. Test movie. Works.

Doesn’t work

1. Set timeline to 0 seconds. Hit animate button.
2. Move timeline to 2 seconds. Scale top side of bounding box up revealing more.
3. 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?

cantMask.hype.zip (51.8 KB)

[jessicatwilbeck (Jessica)]

I’m having the same issue. Did you ever figure out a work around? I’d really like this to work for masking objects.

[mcstampfunk (Josh)]

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.

[jessicatwilbeck (Jessica)]

Thanks for responding!

[Luckyde (Lucky)]

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

[jessicatwilbeck (Jessica)]

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.

[Luckyde (Lucky)]

it seems to work if i break down the parts into groups
arrow.zip (13.8 KB)

[jessicatwilbeck (Jessica)]

This is perfect, thank you for the help! I’ll give this a thorough look, but it’s exactly what I’ve been trying to figure out.

[danlewski (Daniel Lewandowski)]

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.

[Daniel]

Here’s a bit more clarification on how groups work from @JimScott:

Masking Objects Left to Right

Hi Cordes! Below is a schematic of the concept. The basic idea is that the "Graph" is grouped with just itself (inside the folder "Line Graph" in my example) which creates the mask. So at the start of the animation ("0:00") the Graph is -600 pixels in relation to the left side of the group "Line Graph" which of course hides the Graph. As the animation progresses the "Line Graph" group (mask) moves to the left & the "Graph" (inside this mask) moves to the right at the same rate & distance (60…

[Burndog (Steve)]

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.

retailer-toolkit.zip (19.2 KB)