Menu and submenu animations (Timeline and Custom behavior question)

1

Hello!

I’m having a problem with a animated menu with submenus:
I have a menu in which some items unfold as submenus. I have all the items ready and in order to simplify some things I have set it everything in one single timeline. This is how it works:

1.-The timeline is paused with the first menu items unfolded.
2.-User clicks a item that contains other several items as a submenu.
3.-A Custom behavior sends the action to a defined time; the animation continues, unfolding the submenus, then the timeline is paused again. So we have the menu unfolded, and the submenu unfolded as well for the user to explore it at his/her own pace.

Ok, so far so good up to here.

My problem starts as soon as the user clicks a new item. The planned behaviour is that as soon as the user clicks another item, the one that is unfolded, folds again and unfolds the new clicked item.

The planned behavior is as follows:
1.-The user clicks the new item. A Custom behavior is triggered.
2.-Using the custom behavior, the timeline plays and the unfolded menu folds again (either by running the timeline in reverse or by playing a folding animation again, I have it ready for both ways)
3.-The next step in the Custom Behavior is to send the timeline marker to a new position where the new clicked menu item will unfold through its own animation.

This latest step is what is giving me the trouble: Looks like the two actions are performed at the same time. So, the global effect is: the menu folds instantly, and the new submenu emerges with its cool smooth animation.
Only the unfolding animations are played, but not the folding ones. The timeline jumps instantly to the desired point in the timeline without playing the folding animation, either being the reverse animation, or the keyframed folding animation.

How can I make a Custom Behavior that makes one action, then the other, and not the two actions I have inside at once?

I hope that I explained well, english is not my mother language.
Thanks in advance for all the help you can thow… I am out of ideas, and I don’t know what I am doing wrong.

David

2

Why not just use regular HTML / CSS styled menus?

3

Do you have a simplified example document you could share?

4

Yep!!

The timeline is inside the symbol. Three menu items unfolding.
(The doc is in spanish, hope that makes sense anyway)
Thanks for taking a look at it.

MenuV2.zip (40.8 KB)

5

Hi Photics! Thanks for your suggestion.
Well, besides the css necessary to the fonts, and some java for analytics, we would like to use only Hype for doc maintenance purposes.

6

Hi David,

Here is an edited copy of your file.

MenuV2(edited).zip (43.8 KB)

I moved a few actions around to achieve something close to what you want. It’s still not great but it’s a step closer.

I’m not sure how else you could do it with just timelines. Maybe a compromise would be a solution with timelines and a little javascript or css.

Hope this helps!

D

7

DBear, thank you very much for your help. Indeed, a step closer.
You’ve given me some things to try out, but yes, some javascript would help. If the custom behavior cannot be executed step-by-step, may be javascript is the only way to go?

8

You definitely have more flexibility with javascript, but if you are looking for an timeline only approach I recommend using relative timelines. Here is an example document:

Menu.zip (27.5 KB)

Note: I also used Groups to mask the submenu by setting Overflow hidden on the group.

Relative timelines are a bit tricky, but the basic concept is to set the end state for all properties that may have changed on another timeline. For example, the height of the top level menu changes when the submenu is revealed so all menu items with submenus must have their height ‘reset’ by adding two height keyframes. One at the start of the timeline represents whatever the original height is when the timeline is started and the one at the end which represents what you want the end state to be.

1 Like
9

Thanks a lot Stephen!!
I’ve just downloaded and reviewed the file. What a clever solution!!
Yes, the relative timelines can be tricky but they rock, I did some cool things with them but this one is brilliant (and I never thought about the masking trick!!) I’ll change my setup and use yours.
Again, thank you very much!!!

Just to round up the theme, and if you have the time. What would be the way to go with javascript? (warn you, I’m not a code guy, well, sorta, but not for this)