Directional Pause (Timelineaction Helper)


Works on any timeline and is reusable!

If you need to create a directional pause this little timeline function should be of help. Pretty simple and straight forward regular Hype Function (full):

// element - DOMHTMLElement that triggered this function being called
// event - event that triggered this function being called
function pauseIfPlayingForward(hypeDocument, element, event) {
	if ( hypeDocument.currentDirectionForTimelineNamed(event.timelineName) == hypeDocument.kDirectionForward) {
		hypeDocument.pauseTimelineNamed(event.timelineName);
	}
}

Create a function and name it pauseIfPlayingForward and then copy & paste this code:

if ( hypeDocument.currentDirectionForTimelineNamed(event.timelineName) == hypeDocument.kDirectionForward) {
	hypeDocument.pauseTimelineNamed(event.timelineName);
}

There is also a “bonus” function that works for the reverse case (literally).
Create a function and name it pauseIfPlayingReverse and then copy & paste this code:

if ( hypeDocument.currentDirectionForTimelineNamed(event.timelineName) == hypeDocument.kDirectionReverse) {
	hypeDocument.pauseTimelineNamed(event.timelineName);
}

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°

7 Likes

Du Fuchs…! :grinning:

1 Like

I took the liberty to change your file a bit. No javascript needed.:grinning:
I use it a lot. A trick by @MarkHunte
.HypeTimelinePauseIfPlayingForward.hype.zip (14.1 KB)

That is funny because I wrote the Javascript to overcome exactly that workaround by @MarkHunte. As clever as it is… it has a hard coded time code and that was just the thing I was trying to avoid so one can just drag things around without any adjustments. Full circle here :wink:

Side note: everything in Hype is actually Javascript! Just that you don’t see it. The function above is Timeline and Time index independent meaning once you have the function copy & pasted (3 lines) it can be used on any timeline as a timeline action.

3 Likes