Create a toggle switch using Timeline Controls


(wim roegels) #1

As I am still new to Hype (hello again) I am still figuring out, what is the best workflow for what.

In this step (for a project with a lot of content / screnes) I need a swtich to change the destination for a textured Button.

I thought, the best concept would be …

  • create the switch 2 times
  • jump in the timeline back and forth with linking a timecode of the timeline with a click
  • witch the transition of the switch state fade in/out anouter textured button with a a different destination

My Problem is, that the timeline does not stop even with a keyframe saying so. I also tried to split it in different timelines, but it does not stop either … as I need two of these switches, I think it is not the most elegant solution to switch between 4 scenes with the different toggle states.

Can you give me a hint.

PS: loving hype - seems to bee the final destination after a long search for a WYSIWYG editor for HTML Animation and still having ways the inject something - thanks.

switch.hype.zip (121.3 KB)


(wim roegels) #2

I have figured out, that the problem is - as I think - that I trigger both bottons at once as one sits on top of the other. If I move them apart, it works … but not as suggested.

So I can not stack buttons on each other - and the alpha does not disable the button completly?

What can I do?


(wim roegels) #3

I tried my very first JS … hm. Not the most elegant way I guess … but for the first switch it works.

switch-edit.hype.zip (102.8 KB)


(wim roegels) #4

I am lost. One button only can have one destination in one timeline … but therefore I am not able to have 4 states of the toggles in one timeline. As we in germany say … I can not see the forest because of the trees I guess.

Here is a screenshot, to help illustrate, what I want to achive …

Do not get confused with numbers - the 3 buttons and corresponding 3 toggles should not be linked - one toggle for each button switches the link …


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #5

Use a separate timeline for each button.
http://tumult.com/hype/documentation/3.0/#timelines

I didn’t look at the attachment. But from what you wrote, that seems to be the problem. Symbols might be an alternative too.


(wim roegels) #6

Forgot to answer - that’s what I did. Thanks anyway.