Using timeline actions to pause conditionally in Tumult Hype 4

Even if you don’t script using this little snippet is going to make your Hype 4 project easier to maintain.

Often you will encounter moments that call for a switch or an animation that plays forward and backwards to reveal a thing (like a menu or discoverable item). Traditionally, you would have to construct some sort of click stack that fires conditionally by hiding and reveal buttons action or use a hard-coded time index with the action Go to Time In Timeline …

Timeline Actions are triggered by an action key frame

With just a tiny slash of JavaScript you can produce a directional and specially reusable pause helper function that should come in pretty handy and be helpful. The approach is basic and uses a straightforward and regular Hype Function that only pauses playback if the timeline is playing forward. Hence, you can always continue the timeline and bounce back at the end of an animation by reversing playback on the last key frame. Don’t worry setting this up will only take you a minute and you can copy and paste it. The function consists only of two lines and some syntactic sugar like the curly braces. The first line checks the playback direction of the current timeline when the action is triggered and the second command pauses the timeline. Once you copy and pasted it you will have a function looking like this screenshot:

How To:

① Go to the Resource Library and create a Hype function by clicking the small plus symbol at the bottom and choosing Add JavaScript Function.

② Name the function pauseIfPlayingForward like in the screenshot above

③ Copy & paste the following code to it:

Example:

The following is only one example of what you could do with this technique. In this case we always continue a timeline if clicked but pause when playing forward with the little helper above:

Download Example:
HypeTimelinePauseIfPlayingForward.hype.zip (15,8 KB)

Hope this helps°