Masking Objects Left to Right


#1

I’m not sure if I am just finding all the glitches in Tumult Hype 3.0 that will be fixed in the soon to come 3.5, but…
I can animate my mask left to right to reveal the contents within that group, but right to left, nope. It moves the objects in the mask with the mask reveal (adds a left animation then when deleted causes chaos)… which is not what I want. I have speech bubbles coming up, so I need them to come from the source out and have the same animation, right to left, then left to right.
How does Hype do this?


(Jonathan Deutsch) #2

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.


(Trey Yancy) #3

I’ve used the same approach a few months back. Check out the left-to-right swipe in the “Lasting Beauty” / select stains section. With this I have combined animated opacities with mask-based wipes. (My horse for soft-edge masking. Perhaps one day.)

http://lightbenders.com/mobiletest/features.html

(BTW, the Gallery & Info page has a Hype-based display issue, so ignore that page.)


(Kalle) #4

Hey Jonathan, do you have an example for that?


(Freelancer) #5

I’m not sure but I think you can’t do the same thing, from right to left.
Hype works with Left-top absolute X Y.

You can extend any opject from left to right ( and from top to bottom ) but not the other way ( with the right side fixed) . I tried time ago without succes but not with Hype 3.5.

This is a new option, try again with this option unchecked

I’ll try, thanks


Create a circling animation
(Kalle) #6

Ok, got it! :slight_smile:


#7

So, what I’m getting is that because the “anchor point” is top-left in Hype and there is no way to change that anchor point to top right I cannot animate right to left with the mask. The “faux” animation, by moving the contents of the mask to make it look like it is animating right to left would give a different look to the animation from the rest of them. Unclicking the “Position with CSS left/top” button did not change the results of the animation for me. I’m on 3.5.0 Pro.

I need the speech bubble to mask/animate out of the mouth of a person on the right, and then a different speech bubble to mask/animate out of the mouth of the person on the left. Thanks for any help with this. Anything I can do in the code?


#8

Hi @gthroop

Why don’t you group and rotate said group 180º so that it animates the opposite way

Edit Not sure if this is what you want

speechBubble.zip (26.7 KB)


#9

Thanks for that @DBear. Maybe it is because my group has 3 elements in it that it won’t work? I can see that yours works and it’s a great simple solution, but every time I try and change the animation it freaks out, I’ve tried every combo. Currently it shows the width being changed in the animation, but the box is sliding left to right, so it should show “Origin (Left)” animating, not “Size (Width)”. Is this a glitch in the programming? You are allowed to have multiple elements in the group being masked correct? Here’s the file…
index.zip (387.7 KB)


#10

I see what you’re doing. Using my technique above you could animate the text.

I’ll post an example here in a moment for your circumstance.

@gthroop Here is my version. Hope it helps!

index-DBear.zip (330.2 KB)

Unfortunately the technique above wouldn’t work with the group because you need the background to be the same colour as the mask. In your case it has to be see-through. :confounded:


#12

For anyone else bashing their head against this problem (coming from any other animation program, Flash, Edge Animate, etc. where it is standard) trying to simply “wipe left” on a mask animation… you can’t do it easily in Hype. Unfortunately there is a whole bunch of extra work involved in making this simple animation work, and the more complex the animation gets the harder it is.

I have a “blip line” going across a “hospital monitor” in my latest animation trying to simulate the monitor updating information on the lines. I needed two sets of lines animating in opposite directions, so the solution is to group each of the lines (just the lines are in the group) and use the group as a mask by moving it across the screen (resizing the width will not work) while moving the lines (content) back to where they started so that there is no decipherable movement. It’s a total pain in the ass, but works as long as you know the width of the mask and the object inside (try to keep them the same width) and the left position.

Team Tumult, any chance that we will be able to anchor right in future versions? This work around gets very complicated when the animations do. Thanks.


(Cate) #13

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.


#14

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.


#15

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…


#16

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:


#17

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.


#18

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.


Masking Elements by using Content Overflow & Groups
#19

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.


#20

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.


#21

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.