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 …
@Jonathan maybe you can tweak this in h4? I stumble onto this all the time and have to animate the layer in the opposite direction. Is there a javascript workaround to this perhaps lock it by ‘id’ @h_classen¿
Hi Nathan!
I think this is the effect You are describing - or close enough that You can adapt.
There is both a timeline solution & a Hype API JavaScript version in this demo.
The JavaScript elements have IDs assigned to them (in the “Identity Inspector”).
StationeryElementInMovingGroup.hype.zip (19.0 KB)
1 Like
#1. Can someone please quickly explain “animate the contents in opposite”?
and
#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.
Hype 4 is warapping up with the beta and on course to be released in the coming month(s) but don’t take my word for it. I was just saying if it’s something team tumult can address in the shortest period of time to trick this element to lock the layer in the time of animating masks that would be awesome because I find myself in the same boat as you. I wouldn’t use the word lame though, there are challenges in the way overflow hidden works and currently as it stands the trick would be to use JavaScript under the hood.
Lame = retracted.
sorry.
No worries, please check @JimScott response as a solution for both timeline and a javascript workaround.
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.
Thanks guys.
I’m just trying to keep things simple over here.
Never knew that masking could have so many different forms and complications.
Animate on…
Hi Nathan!
Here is version 2: StationeryElementInMovingGroup_JHSv2.hype.zip (13.0 KB)
Hope I got it right this time… the above is just a timeline demo - can be adapted for JavaScript too.
Effect
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.
Technique
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.
1 Like