I am running into this same problem. I want to reveal an element going L to R on top, R to L on bottom. It’s proving incredibly frustrating to figure it out, and this thread makes me wonder if it’s worth it.
Welcome to the Forum Cate!
It will be helpful to show your work~Hype project, as there can be a large number of variables to almost any set-up.
This is absolutely ridiculous. I’m having the same issue. Can’t animate a line right to left using a mask without some torturous, circus act. Very frustrating. Looking for other options…
Cordes,
The text of your post offers more heat than light.
Why don’t You upload a Hype project showing an example of what You are trying to accomplish?
Below is a Hype project with a basic example of a right-to-left line graph.
GraphFromRight.hype.zip (17.8 KB)
(2) components: A SVG line graph that has been “grouped”. The “group” itself forms the second component.
Less than a minute to set-up the timeline, no circus act required. ;->
Video of the project:
1 Like
Jim,
Thanks for the response and sample. Yes, you are correct about the heat. It’s a re-occruing problem with the basic masking option within Hype. Once you start moving the mask, the x,y of the line moves as well, not just the mask. It works smoothly from left to right, but not so in the opposite direction. Why is that? Coming from a Flash and 3D background, I find this extremely unintuitive animation wise. I could be wrong…
I’ll take apart your sample and figure out how you did it.
Thanks again.
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 (600 pixels) which has the net effect of revealing the Graph from a right to left direction, giving the illusion of The Graph appearing stationary but it is actually moving also.
BTW: I was just reading through some of the other responses & @jonathan posted the same solution in Post #2 above some time ago...
You can animate the group (doing the masking) to move and resize in one direction, and then the inner contents can animate their position opposite to it.
1 Like
Thanks again Jim,
Excellent example.AnimationIssue.zip (21.4 KB)
One of the problems that I was getting into was setting a keyframe, moving the playhead forward a few frames, then moving the side handle of the mask. One would think just the mask would animate the specific element, but it adds Origin (Left) keyframes to the graphic as well. This is not reflected when you’re moving the mask. Only the Size (Width) is animated.
Attached is an example. Also, the rectangle graphic behaves differently with a mask than an imported .PNG. Which is another issue. Why would Hype treat these elements differently?
There’s a specific reason why I’m using one image and animating a mask over the different parts. A workaround might be breaking up the graphic into two and animating the different directions, if I can control the added Origin (Left) keyframes. It’s aggravating because it’s adding keyframes to what would normally be a straight forward animation.
Hi Cordes!
I need a bit more time to go through your example - and it is bedtime here in California.
I will pick it up tomorrow.
Hi Cordes!
Attached is a Hype project:
AnimationIssue_v2.hype.zip (25.0 KB)
I am not certain if I got things right for You or not. In the attached screenshot I am showing the graph that I believed needed the work. However, it was identified as “Image L to R” (though seemed to be a right to left movement intended) - but the other: “Image R to L” appeared to be performing correctly (even though in my mind the line is moving left to right, so I’m not sure of your frame of reference).
In any case, even if I twisted your meanings, there is now an example of a graph animating to the left and a graph animating to the right in the attached project.
Also please note that I removed the grouping from one of the green rectangles ("R to L"). I kept the other one grouped for comparison. These green rectangles do not need a mask, they can grow from "0" pixels to the full desired length using basically the same technique: as the green rectangle moves to the left, this movement is matched by the increase in width (which moves to the right). The overall effect is that the left side of the rectangle moves to the left, the right side stays stationary.
There is no need for a mask here as the rectangle is an homogenous field - there is no detail to distort (in contrast to an image). The rectangle is always the same appearance no matter its width whereas an image would be distorted going from 0 pixels to 250 pixels (or whatever). So with the line graph in this case we always want it to be 100% and need the mask. Think of the mask as the outer sleeve of a matchbox and the image as the inner box full of matches. We want the image (matches) to slide out of the mask (matchbox) at the actual (non-distorted) size.
2 Likes
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)