Timeline should: Pause, if playing, and play if paused

Using JavaScript with Hype
1

Hi there.

I’ve made a series of animations about the danish municipal election history which poses as a sort of a gif on our website. (html5 of course, but they look like gifs)

They’re very simple - just one image per scene and a crossfade to the next so they’re easy to keep responsive to mobile devices, but what I dream of is that the user can pause them just by clicking them. And then continue them by a second click.

I off course could do this by adding two buttons, but I’m thinking there must be another way, as I don’t really want to include buttons in these but keep them as simple as possible.

I’ve browsed the forum, but I can’t seem to find a similar request, but I’m thinking it’s gonna take some type of script and here my abilities are limited to more or less copy/paste:)

Hope someone can help me. I’ll attach a zip-file with one of the projects.

All the best
Peter from Copenhagen

3.biggest-party-kv-2001-2013 copy.zip (634.7 KB)

2

Use a On Click Action on the images on each scene to call a javascript.

	var isPlaying = hypeDocument.isPlayingTimelineNamed('Main Timeline')
	
	 isPlaying ? hypeDocument.pauseTimelineNamed('Main Timeline' ) : hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);

Also read up on Conditional (ternary) Operator

1 Like
3

Wauw. That simple. Community Leader indeed!

Thanks a lot, MarkHunte. That’s just brilliant.

Best, Peter

3 Likes