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.
AnimationAnomaly.zip (125.4 KB)
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: HypeSpeechBubbles.hype.zip (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.
AnimationAnomaly_v2.hype.zip (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.
1 Like
Jim,
I’m checking it out. Thanks! I didn’t get email updates of your response. Didn’t forget you!!!
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?
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’ it.crop_example.hype.zip (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 JHSv1.hype.zip (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.
3 Likes
thank you Jim!
1 Like
I have an unmasking of an image that is a bit shaky if you look at it carefully -- at least on my screen (specially if you scroll below it and then scroll up for the reveal, you can see it).
Is there any way to mitigate this? Either by tweaking the guidelines suggested above (reverse timelines) or through JS?
Thanks!
Un-Masking Image without shaking.hype.zip (350.3 KB)
To do a right-to-left unmask with the group approach, the group and inner contents much change by the same pixel amount on each animation frame, otherwise it will jiggle quite a bit as it moves.
While you do have them moving the same amount, the flexible layout system is changing the sizing and thus making the group positioning and inner contents sized in a manner that makes the animated amount different.
The easiest approach may be to turn on "zoom contents" in the flexible layout settings on the "End" group - this will use a scale transformation for the group including its child which will scale with it.
Otherwise you could either turn off flexible layout for those elements if you don't need it, or there might be a way to arrange the sizing so they are width scaled identically (but I think this is going to be hard/impossible).
1 Like
Jiggle is the right word!
Zoom did not work as well. However, turning Flexible Layout off solves it.
Thanks Jonathan!
1 Like
This is long after the last post, but is one of the things I love about this app: the community. So just wanted to express my appreciation. This was something that had me stumped, as it seemed a pretty basic thing to animate a group from any edge. But good to know "it's not just me." My solution was a simple sandwich with my background, so as I wiped across the image to reveal it by pulling my group box from left to right, I also revealed the background contained in a group on top in the same manner. A workaround, but a really simple one that works in my case, once I knew that I could only drag one side of the group box to mask.
2 Likes