How to make a Single Toggle Button

Tips & Tricks
1

I have noticed that many people struggle to work out how to make a toggle button that uses a single Timeline.

Many get tripped up by putting a Pause timeline at the beginning of the timeline when wanting to use reverse timeline.

The animations either don’t start, take two clicks to start or just repeat …

Here is an Example of how to do it simply and with only one Timeline.
Note I do not use start Timeline anywhere… especially in the Buttons Actions. This is another mistake that people fall into when trying to make a toggle like this.

singleToggleButtonAction.hypetemplate.zip (188.2 KB)

Screen Shot 2015-07-09 at 4.10.31 PM.png1388×1104 494 KB

9 Likes
2

Thanks @MarkHunte – cool technique!

Adding your nice diagram to your post.

1 Like
3

Hi There,

I’m really struggling with this - it seems like it should be simple but when I use the logic suggested on a different file it just doesn’t work.

Either the animation stops or jumps back to the beginning?

Here’s an example of what I’ve recreated based on the instructions? What am I doing wrong? Toggle-question.zip (16.3 KB)

4

Hi,

you simply jump to the wrong time in timeline.
switch: 00:14.00 to 00:00.14 :slight_smile:

2 Likes
5

Groan… thanks for the quick reply!

1 Like
6

Thank you for this example. Works a treat.

1 Like
7

hey there , how if i want to make several toggle buttons? like this http://umd.edu

this is what i have made :bar.hype.zip (12.4 KB)

I hope when I click the orange bar one times and then click the green bar , the orange bar going to reset into its first state and viceversa .

8

I am still using this method today. Thank you for sharing. Does anyone know why a simple reverse timeline is not possible? Or does anyone have a script to solve this?

9

The example in the top post does reverse the timeline; can you elaborate on the behavior you are trying to get?

10

Hey

The behavior would ideally be to use an on mouse up release event to trigger a timeline to play and then use a second mouse up event on the same button to reverse the timeline that just played. That would be a very simple toggle construct. I am happy to use the solution but it seems complex.

Nick

11

@nickbarling

Hi Nick - Welcome to the Forum!

@MarkHunte’s example was timeline based, which has no conditional structure built into it. So a wee bit of JavaScript will give You a simple conditional evaluation. Most of the code is generated by Hype’s Timeline API that is tucked inside a simple conditional (if/else) construct:

e.g. if (current time in timeline is “0”) play timeline forward, else play timeline reverse.

Demo Hype Project: ToggleWithJavaScript_JHSv1.hype.zip (13.0 KB)

JavaScript function toggleTimeline

if(hypeDocument.currentTimeInTimelineNamed('RectAnimation') == 0) {
	hypeDocument.continueTimelineNamed('RectAnimation', hypeDocument.kDirectionForward);
	}else{
		hypeDocument.continueTimelineNamed('RectAnimation', hypeDocument.kDirectionReverse);
}
4 Likes
12

Thanks, Jim. Got it!

1 Like
13

Though this thread is a year old, this tip came in handy for me now. Thanks Jim.

On a separate, but related note: I think Hype could use a condition builder. Having one could do away with many small and simple conditional needs that seem too involving (code wise) for most designers without major frustration, and dependency on forum members that are code savvy. Hopefully this is already recognized, and is slated for near future release.

2 Likes
14

Thanks for the feedback!

15

Thank you for sharing this technique, it's very efficient.
Just ask you a question:
I’m using this technique for more than one button. When a single button is clicked, it change color.
I wish that when one of these buttons is clicked, the previously clicked button will disable.
I don't understand how can i make this without java... or do I need it?

16

Think I and others have probably posted a non js way... somewhere..

Found one.. by @ktewes

Also using a similar toggle like my original above.

The change is on the pauses, we reset the other timelines.

(Screenshot 2021-01-02 at 19.31.55

(The logic is similar to the simpliest way of doing it in JS. You reset them all and then set the one.)

toggle set.hype.zip (14.5 KB)

3 Likes
17

Great :slight_smile: thank you Mark

1 Like