Ok, I’m animating a banner ad and I want a line of text to disappear as two other objects come together over the top of it. I have the text grouped with a “null” object (just to have a group), and I have the content overflow set to hidden. When I change the position/size of the group bounding box the contents move with the left side of the bounding box instead of just sitting in place. How do I keep the contents of my “group” to sit still as I change the “hidden” group bounding box?
animate the contents in opposite …
I think this is the effect You are describing - or close enough that You can adapt.
StationeryElementInMovingGroup.hype.zip (19.0 KB)
#1. Can someone please quickly explain “animate the contents in opposite”?
#2. JimScott the problem I’m having is because I have both sides of my bounding box moving in towards the center at the same time.
Also, what is H4? Is there a Hype version 4 that I know nothing about? I will buy it.
So I fixed the problem by just writing down the X factor of the inside “type” of the overall bounding box. Then putting in opposite factors after the animation happened.
Lame, but it worked.
Lame = retracted.
I saw those. His example is only hiding from one direction (coming from the right). I can do that all day with zero issues. It’s when you move the left side of the bounding box that this problem occurs.
This kind of animation on the wrapper with overflow hidden is not really a mask. It is like said a wrapper element (DIV) therefore the top and left position get and should be added to its children. Looking at is as a mask is a common hack but I don’t think therefore that keeping the content static will be a feature (in my opinion) also it can be done with the timeline and I often do it too. So it not lame but common and good practice.
If you want to use this trick with a drag handler it fails as it flickers you then need to sync it to renderframes and here is an example to do it (using an m”Mutation Observer) Transparency Effect with ClipPath
In that Thread is also a real mask example using a SVG mask written by @DBear
Hope this helps you or any future visitors that find this topic.
I’m just trying to keep things simple over here.
Never knew that masking could have so many different forms and complications.
Here is version 2: StationeryElementInMovingGroup_JHSv2.hype.zip (13.0 KB)
The “text” stays stationary in the center of the page. The “Group” closes towards the center simultaneously from both sides so as to make the text disappear evenly from both sides.
The “Group” moves right and its width shrinks from its starting value at the same rate - thus closing evenly to the center. The text moves to the left balancing the rate of the “Group” moving to the right.