Button wont change color on relative timeline when cursor is on it


Hello ! I’m creating a menu in HypePro and I’m using relative timelines.

When I click one of the menu’s buttons, it go to a specific timeline and it’s suppose to change the color of the button to indicate this section is active.

But if I let the cursor on the button while I’m clicking (?!), the color revert to the original. That’s probably because while I’m clicking, the button is in «Hover» mode and when I remove the cursor, the animation changing the color has already passed… If I get the cursor out rapidly, the button take the good color.

Would there be a script so that Hype ignore the cursor for half a second so the animation can happen properly?

Thanks for your help !

(Andrew) #2

You would use timeline actions, one at the start which would change the colour of the button, and another at the end, which would be trigged at any time on leaving, of the timeline.

Not sure if that is much help, but without seeing what you are doing, it’s difficult. Feel free to share the project, or that part of it :smile:

(Steve Flowers) #3

Howdy! I wouldn’t use a button alone for state shifts. You might do better using a symbol that contains your menu and overlaying the menu with another shape during the active phase. Setup several timelines in your symbol.

Alternatively, you might have good luck with a completely custom menu driven through script. Here’s a prototype that I put together a couple of weeks ago. This changes the menu by scene and also tracks “activity status” with iOS style badging. Not done yet, but this could provide a sense of where you could go with a custom menu build. This could just as easily be injected into a shape or symbol with a specific ID.



Thanks for your answers,

My menu is already in a persistent symbol with relatives timelines and I already tried to use a transparent shape over the button to de-activate it. I’ve also tried function to change the color of the button, sadly, when the cursor is over the button, it seems to have priorities over anything (animation, function…).

Here is a link to a test document that show my problem : https://dl.dropboxusercontent.com/spa/0dk04bt2bjkz0ot/Exports/TestButtons/TestButtons.html

Try to click and rapidly remove the cursor then try again while you let the cursor on the button… The results are not the same.

I would need Hype to ignore the cursor for a fraction of a second, so the animation get priority on the button states.

Thanks for your help, I will let you know when my site is ready !

(Andrew) #5

I am really confused on what you are trying to do. I have seen the hover take place, but that is all. If this buttons is pressed, is the idea you do not want it pressed again, but then available again when another button is clicked.

From what I see in that link, I see what is expected to happen. If I click, then remove the cursor and then put the cursor back again, it hovers. So what is wrong ?



The problem is when I let the cursor on the button until the animation is done. Then, when I remove the cursor, the button change some of it’s properties back to it’s original setting.

I’ve speed up the animation, maybe it will be easier to see : https://dl.dropboxusercontent.com/spa/0dk04bt2bjkz0ot/Exports/TestButtons/TestButtons.html

When active, the button should always be green text on black background, but with this bug, it’s going back to black text on light gray.

I would need a Function which can disable the button during the animation and then re-enable it… I think !


Resolved: Downloading zips not working most of the time?
(Andrew) #7

Can you drag the project into the reply box so I can see it please ?


Here it is ! Thanks for your help.

TestButtons.hype.zip (18.2 KB)

(Andrew) #9

I have looked at this, and I understand now. If you start the timeline by pressing a button, and the timeline changes the style of the said button. Unless you remove the cursor as soon as the timeline starts (or you clicked the button), the new style created by the timeline is not kept.

I understand what it is doing, but I do not know how to change it @Daniel would need to get involved in this :smile:


Ok thanks for trying !

On my side, I’ve try to disable the cursor at the beginning of the timeline (pointer-events = none) without success.

(Andrew) #11

I tried to unbind the mouseleave or mouse out event on the element, and also use JQuery .off, but both effect CSS, and as I cannot see any CSS within Hype, it must be javascript run.

But I have managed to fix the issue. It must have been something to do with the order in which you created the animation. Check this out, let me know if it fixes it

TestButtonsv2.hype.zip (95.1 KB)


Excellent ! Thanks MrAddy !