Menu + Submenü Animation with js variables

Using JavaScript with Hype
1

Hello,

I have a question to set js variables to better control the animation when moving submenus in and out.

In the hype file posted here, you don't need js to make it work, I am aware of that.
What I would like to achieve is that when you click on another menu item, the submenu of the opened menu item first collapses and then the submenu you just selected expands. At the moment you jump from the opened submenu directly to the extend-animation of the next submenu, which I don't want. As an example, simply click twice on a menu icon, then the submenu collapses.

My idea is to assign global variables to each icon or thumbnail so that you can jump from any menu item to another one, no matter what scene you are in, and the submenus are nicely animated.

I just don't know where to place my js "menu_where_to_go" correctly. I have been looking for solutions here in the forum, but the problems are always a bit different and my js skills are not sufficient.

I am happy about any help.

Menu with submenu.hype.zip (294.1 KB)

2

Here's how I would break it down:

  • Add a function per menu that sets a variable (let's call it "menuToOpen) to the menu that you want to open.
  • Then run a common "closeIfNeeded()" function. This can look at the timeline state to figure out if there is a menu open. If so, it can close it. If not, then it can immediately run the "openExpectedMenu()" described below:
  • Add a "openExpectedMenu()" that runs when closing timelines, or via the above step. What it would do is look to see if menuToOpen is set, and if so it would run the timeline to open that menu. It then unsets/clears this variable so that if you just open a menu from a closed state it won't get called.

This approach may be easier if you have a different timeline per each menu, but I think it could work with your current approach.

1 Like
3

Thank you, Jonathan, different timelines is a good idea.