Vertical animation for mask using content overflow

hey guys

Please help me understand why i cannot animate a mask from the bottom up (vertical).
It seems left to right works but as soon as I animate vertically, the graphic inside the group gets animated as well. I want the graphic to stay anchored while only the mask move.

I’ve enclosed 2 files…one is a workaround I’ve managed to come up with, the other is the failed example of creating a simple vertical mask animation. I need this to work in an intuitive manner as Vertical animation with a mask is something that will pop up often in what I do at work.
Dan, If you don’t already have a perfect solution for this, I hope it’s in the next version of Hype.
This is an absolute must have feature. Animate does it so perfectly, I don’t see why you can’t with Hype. I made the switch to Hype from Animate cuz this app is awesome. Please keep being awesome! (54.8 KB) (48.1 KB)

I’m assuming you are using a “group” for the said “mask”.
Hype does not have a “mask” feature which is why you are experiencing the issues. I believe this is on the radar, but a little heads up that in the next version there will be vector manipulation which will make line drawing animations a lot easier.

Like this?

I think you misunderstand me.

I mean you are already using groups to animate the “lines” in your document. But these are just groups and even though you can animate the width and height you cannot use them as a genuine “mask”. Workarounds are all you can do for now.

Also, I changed the category to feature request for this reason.

A masking tool simply does not exist in Hype at the moment. Will it ever include one … that’s for the team to decide :slight_smile:

Is this what you mean to do?

1 Like

No. What i meant to do is in the example i enclosed. The one where the line at the bottom reveals itself. The one you showed me in that mp4 is not what i wanted. The failed example i enclosed shows how the graphic inside the group animated when it’s meant to be anchored. My question was, why is this happening when the animation was meant for the group container, not the graphic the group.

I am not clear on exactly what @DBear or @DangeroftheBanger have done so part of this may be re-treading the tire…

As @DBear stated Hype does not in v3, or the upcoming v4, have a dedicated mask tool but there are workarounds (easy IMO) in v3 - and in v4, as @DBear also mentioned, there is a vector tool which will really nail the dismount for your particular example.

These examples are specific to the line animation as shown in your “Mask_workaround” Demo - a line animates to a target destination.

So proceeding from kludgy to clean:

Solution 1 (using your Demo, a workaround but it is very straightforward)

Animate the “linedown” graphic in the opposite direction of the “line down” group. At the beginning of the animation the top of “linedown” graphic is at the bottom of the “linedown” group. As the group moves down the graphic moves up (inside the group) at the same rate. Note we only need to animate the “top” property for both the group & the graphic to create the effect… “height” is not needed.


Demo: (60.8 KB)

Solution 2 (quick & simple - no masking needed)

Create a rectangle with no background color and just one border.
Rotate the rectangle to the needed angle.


Animate the height of the rectangle.


Demo: (12.6 KB)

Solution 3 (Hype 4 beta - v4 should be released “soon” - using the Vector Tool)

Just a video here as I am assuming You do not have a copy of the Hype 4 beta. Create the starting & end points of a straight line with the vector tool. Done.

1 Like

Thanks for that. I’ll look at your solutions and see if i can apply them to my ongoing projects.

1 Like