We have a really frustrating problem here. In the animation, i’ve got two images on top of each other. Both of them have a action on click link attached to them. I now want the first image to fade out and the other one to fade in. Said - done, doesn’t work. If I put the second one on top, I can’t click the first one and vice versa. They’re nested in separate groups, which are animated themselves. Those groups sit in another higher group.
The fade-in and out effects are done via changes in opacity and the “display” switch.
Am I missing something here? Is there some sort of “appear / disappear” switch?
Here’s the project file. We had to use .pngs for the words because the text boxes had scaling issues in the responsive part. png_cloud.hype.zip (193.0 KB)
I'm not sure of the exact effect You are looking for - i.e. when the visual switch is supposed to occur and the second element~group is intended to be clickable. So I made up my own example...
I did not see in your example the use of the "display" property which removes the influence of an element from a scene. I just saw the opacity being adjusted.
I now want the first image to fade out and the other one to fade in.
In this example we start with the timeline running and the first element "Blue Rect" (could be a group) fades into the second ("Red Rect"). Clicking on "Red Rect" starts the timeline again. No reason "Blue Rect" couldn't be clickable as well - just set a click action before the 2 second mark (in this case) at which time its "Display" value is set to "Hidden".
Just to echo this answer - if you only fade opacity the element is still there and will respond to clicks. The easiest way to solve this is that once it has faded out (via opacity), to also change its Display setting to hidden and it will then be removed from handling clicks.
I use nulls - transparent objects with actions attached, floating on top of the buried items.
One thing I use this for is drop-down menus. When men menu drops, a null object drops over the burger button. Click on the null and the menu, along with the null object, retracts. This produces the effect of a toggle but without the scripting and booleans.
If (when) Hype reaches the point of supporting the creation of free-form vector objects, this null trick could be even more effective.
Why does a "burger button" (without a "null" object) require "scripting and booleans" in order to retract~toggle a menu? A timeline could handle this... or am I not understanding the effect You are describing?
Clicking on the same object twice – the first to start the reveal timeline and the second to continue > reverse the timeline. With Hype, actions span all timelines. If an action could be limited to a specific timeline, I would just use a different action for the same object in another timeline.
This is to cover the eventuality that a person may not select an item on the menu but dismiss it.
Back in my Lingo days I would use a mouseUp to check and/or set a flag and then execute a resulting action. Due to the insane workload I haven’t been able to spend the time necessary to get up to speed with JS or I would script the toggle.
