Masking Elements by using Content Overflow & Groups

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

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.

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

2 Likes

I made the same thing time ago.

this is the App ( english and italian, free )

1 Like

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?

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

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)

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

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.

Thanks for responding!

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.

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

1 Like

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.

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.

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

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)

I am not sure I understand. why that would be important.

A group creation is not part of any animation and does not need a keyframe.
It is a group(div) on the scene at some position. It is there or it is not and present as an element on all timelines like any other element. ( which also do not have keyframes to indicate creation)

You can change that position and animate the group properties including position with keyframes.
Elements within it are in there at some position which can be changed via keyframes…

Saying all that having an event for element creation would need hype to be able to create/add elements on the fly, something we have asked for in the past. But more in the vain of cloning.

Hey Mark,
The part that is important is that when on the timeline the group is created makes quite a difference in how the envelope of the group is positioned.

On the sample I posted you can see that the second line dose not show the text as expected from the masking perspective.

If someone does not understand that the frame on the timeline , when the group is created, determines a significant factor to the mask. I just wanted anyone reading on how to do this masking method to clearly understand this so that they are not confused or waste time.

1 Like