Toggle animation Play / Pause

(John) #1

I’m new to actually using Hype (even though I’ve owned it since version 1). I have an animation that I’d like to pause on mouse click and then continue playing after second mouse click. Is this possible without using JavaScript?

My JS knowledge is pretty much nil. It seems like this should be a really basic functionality though, but if so, I can’t figure it out. Any help would be appreciated.

(Loves Hype) #2

Well you have two buttons and you certainly can do could do some setup with two timelines

Here is and example with timelines and one with code in one file: (50,6 KB)

Each example is in it’s own scene.

(John) #3

Thanks MaxZieb. That’s just what I was looking for. Guess I’d better start learning some JavaScript.

I really appreciate your help!

(Mark Hunte) #4

I think learning JS is a very good idea,

Just one thing though you can also use a single timeline for the play pause toggle.


So putting this in @MaxZieb 's example file ( scene 1 )

play_pause.hype (68.1 KB)

(John) #5

Thank you, Mark.

Wow. Another way to skin the cat. This is a very clever approach, although I’m thinking it would only work when the animation can play equally well in either direction (as is the case with the oscillating ball). The two timeline approach does allow the animation to play in the same direction.

In any case, I will try to implement your logic on my own animation (as I did with Max’s suggestion yesterday). Getting these to work has been a great learning tool for me and has answered a lot of questions.

Again, I appreciate the help!

(Mark Hunte) #6

Not sure I follow your logic in regards to a Toggle button for play/pause…

The Toggle is just the control. i.e sets the behaviour of the play/pause button and in the example we do not change the direction of the animation on the main timeline we either pause it or continue it. The looping of the animation is down to what is set on the main timeline animation.

Can you explain what you mean …?

(John) #7

Hi Mark,

Maybe I’m missing something (it wouldn’t be the first time), but the animation you put together has a timeline that plays the sequence in reverse order after the first pass. I’m looking to play in a sequence like 1 2 3 4 1 2 3 4, as opposed to 1 2 3 4 4 3 2 1. I want the contents to always play in a “one-directional” ordered sequence no matter where it is paused.

I put together an example, using the “one additional timeline” example you suggested and the “two additional timelines” example that MaxZieb suggested (good practice for me). Hopefully, this will explain my sequencing issue. And maybe there’s still a way to do it with your timeline, but I haven’t been able to accomplish it. (The “Inner HTML” thing was a good trick for changing the button text. Thanks for that tip!) (44.9 KB)



Hi John!

If I understand things correctly then You would just need to make one change to your set-up in Scene “One Timelines” (I did not use the second Scene)… in the “Timeline Action” at 2 seconds; “Main Timeline”. (15.9 KB)

Fig.1  Your current version (“Continue Timeline” + “Play in Reverse”)

Fig.2   See if this change does it for You (“Go to Time in Timeline” > “00:00.00”)

(John) #9

Yep. That did it. Yesterday, I tried unchecking the “Play in reverse” and changing the action to “Start timeline” with odd results (although when I try it today, that works too). Duh.

Viva the “one additional timeline” solution.

Thank you!