Masking Objects Left to Right

(Alexandre Lemay) #22

Hi Jim, I think I have another example here of this problem. I made this as simple as I can. When I close the mask and reopen it, the object within the group is moving and it shouldn’t. There is nothing in the timeline that reflects such movement inside or outside the group, so I find myself unable to delete this movement or to modify it… Please help. (125.4 KB)

(Mark Hunte) #23

Link in munged… (125.4 KB)

(Jon) #24

Just for completeness, I thought I’d update the original speech bubble animation provided by @gthroop. It is frustrating but using a little math, as explained above, it’s relatively easy to achieve the desired effect without needing to rotate anything. The right to left speech bubble mask is 220 px wide so the contents’ origin needs to animate at the same time from -220 to 0 giving it the illusion it is stationary while the mask expands from right to left (and doing the opposite to collapse). Easiest if the contents (comprised of 3 elements, in this case) are also grouped. Again, not saying anything new here, just providing the example document so people can see it working: (384.8 KB)


Hi Alexandre!

The same principle applies here as the others. You move the two elements in opposition to each other. The Text Block is in effect “locked” to the top of the Group. When the top of the Group moves so does the Text Block. So to if the top of the Group moves down 37 pixels You must move the top of the Text Block up 37 pixels (over the same time period) to give the appearance of the Text Block being stationary. (129.1 KB)

A Note here:
I had to tweak the the second part of the animation a bit… where the “first part” is the closing of the Text Block and the “second part” when it opens again. It should have been a simple inverse setting, but I had to delay the appearance of the Text Block a bit by keeping its height at 1-2 pixel until the thin lines (rectangles) above and below the text had a chance to move further. You’ll see.



I’m checking it out. Thanks! I didn’t get email updates of your response. Didn’t forget you!!!

(masha) #28

Hi fellow users. my problem is to crop the image from left to right, where image stays on the same position. Any suggestions? It only works from right to left for me, been struggling to change the direction, no luck so far.


Hi masha!

Welcome to the Forum.

Would You post your Hype document so we can have a better chance offering an appropriate solution for You?

(masha) #30

hi Jim, thanks for you help. Here is the document. Basically I want text to be cropped from left to right when a rectangle covers it, so that it looks like the rectangle ‘erases’ (16.8 KB)



So what we need to do is reverse the process discussed for most of this thread. In your case, instead of the mask revealing content as the timeline moves forward the mask hides content; but it is in essence the same process: The masking element (the “Group” folder in your provided example) moves in the opposite direction of the content inside it (the “Text” element in your example).

The important thing, whether you’re doing a reveal or a hide, is that the mask & its content move the same number of pixels in opposite directions over the same time period to give the illusion of a static display. Also critical is the mask element is set to “Content Overflow: Hidden” (this setting found at the top of the “Metrics” Inspector).

So using my attached version of your example: crop_example (21.8 KB)

The mask is fully revealing its content to start; the content is at “Left: 0 pixels” (in relation to its parent the mask). The mask is at “Left: 209 pixels” in relation to the Hype window. Once the right edge of the “erasing” rectangle touches the mask, the movement of the mask & its content begins. In less than a second the mask will move to the right 209 pixels to “Left: 418 pixels”. During that exact same time period the content (the “Text” element) moves to the left (inside the mask) to “Left: -209 pixels” (note the minus sign).

The time period of “less than a second” is based on how fast the “erasing” rectangle element is moving. The time period could just as easily be 3 seconds (or whatever). If it was 3 seconds, let’s say, you would need to adjust the timing of the hide operation for the mask & its contents to match the change in time.

(masha) #32

thank you Jim!