Controlling a timeline via javascript on the page


Hello all, I am interested in purchasing Tumult but I am having an issue with controlling the timeline. I am properly instantiating HYPE with the following:

function myCallback(hypeDocument, element, event) {

			    // do something with hypeDocument...
			    // HYPE.documents["documentName"] which is the same thing is also ready now

			    //alert('hypeloaded'); this works

			    //alert("id: " + + " type: " + event.type); this works

			    //alert( hypeDocument.documentName()  ); this works

			    //alert( hypeDocument.documentId()  ); this works

			    //alert( hypeDocument.resourcesFolderURL()  ); this works

			    //alert( hypeDocument.currentSceneName()  ); this works

			    hypeDocument.pauseTimelineNamed('Main Timeline'); this does not work

			    return true;

			  if("HYPE_eventListeners" in window === false) {
			    window.HYPE_eventListeners = Array();
			  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});

Does anyone have any idea why everything would appear to work but I cannot pause the playback with that command that targets the timeline name? I have also tried to create a new timeline and name it something else but that doesn’t work either. I really love the software so far but I need to figure this out before my trial is up for purchase. Thanks in advance.


Can you share your testing .hype document?



(Mark Hunte) #4

The one you posted just has the animation and no JS, so we cannot see what you are doing…

i.e where you are placing this function which is normally in the head . Not sure what you expect from this ?

Can you supply the version with your JS in ??.
And explain what you are trying to do.


The reason this probably does not work is that it is fired too soon before the timeline is fully registered.

If you really want to add this to the Head then you would need to delay the code with something like a setTimeOut

	  hypeDocument.pauseTimelineNamed('Main Timeline');
	}, 1000);


I am trying to control it via js from the html file. Is this not possible?

Everything else alerts as it should.

I’m doing it via document ready with jquery. It should work no? Also, using a timeout is a really nasty way to avoid an issue. The callback should fire on success yes? It does fire and I can do everything except control the animation. I really don’t want to intermingle js with a simple timeline animation if it’s possible.

(Jonathan Deutsch) #6

The HypeDocumentLoad callback is too soon; no scene or timeline has been loaded at this point so you can’t really pause it. You can use it for the HypeSceneLoad event if you want (note the callback will be triggered for every scene), or set this up in the app with the ‘On Scene Load’ action in the scene inspector.