This one is a little hard to explain, but I have two menus that are nearly identical. When you trigger the menu on the left and then click to dismiss it, the button immediately goes to the hover state. But when you trigger the menu on the right and then click to dismiss it, the button doesn’t go to the hover state until you move the mouse cursor. I can’t figure out why they’re behaving differently. Any guesses? I’ve got a video that shows the behaviour that I’m seeing, and I’m attaching the Hype file as well.
So I populated the menu with some menu items, and now the button hover state triggers only after the timeline has finished playing. The symbols are still nearly-identical, but still behaving differently. Any ideas?
Can’t see anything out of the ordinary @ian128K but there’s quite a bit going on.
Have you tried duplicating the menu on the left and then changing the images? would this result in the same outcome or something different?
I spent some time today investigating this, and I’m still not entirely sure what is going on! I can say that the difference between the two is that on the “In the Starfleet” Navigation menu symbol, the “Menu” group has animations and the “Logo (Nav Menu Open)” element has button states. If you remove the animations from the group (setting it to be visible) and use Edit > Clear Button States for the element, it will behave the same way as “The Pilot” Archive Menu symbol.
While not exactly desired in your case, I would probably consider the way The Pilot behaves to be more expected. When you change the Display of an element to hidden, it triggers a mouse out. This sets the button state to be back to normal. Setting Display to visible unfortunately doesn’t typically trigger mouse over events in web browsers, and thus the button also isn’t being activated.
You could probably work around this by doing the opposite approach of using the opacity on a lower z-index button, and then setting the display on the click state of the element above it.
Hmmm. So the behaviour that I actually want would be to not even have a flicker of blue like in the Navigation menu, let alone the long delay of blue in the Archive menu. Basically both buttons would stay yellow until the mouse actually left that area of the screen. It sounds like what I might want is to force a mouseover event somehow when the “Logo” and “Episode Title” elements have their Display set to visible. I didn’t know about those trigger behaviours before, so that’s new information for me.
I’m going to try experimenting with the .onmouseover() method to see if I can trigger it programatically. If anyone has any other ideas to try, I’m all ears!
Create the normal (blue) button and add a hover state so it turns yellow
Put the pressed state image above this button, but set it to Ignore pointer events. Also make the Display Hidden
Have the bottom button have an On Mouse Click action that Continues a timeline with Can restart timeline checked
This timeline should should have a setup where it has a display hidden keyframe, display visible keyframe, and another display hidden keyframe for the pressed state element. On the visible keyframe, have the timeline use a timeline action to pause the timeline.
Step 4 means that each click will act as a toggle to show/hide the pressed state version. Since it ignores pointer events, the hover state for the button will still correctly apply.
(an optional step would be to add opacity keyframes with instant transitions for the button, but this isn’t necessary is the pressed state fully covers the normal/hover states)