Timeline labels & continue/play the timeline up to a specific point

I really miss timeline labels. It’s a real kludge to be jumping to a position in the time line that represents some state, but having to remember numbers. The frame labels in Flash helped document the code and made it possible to adjust the timeline and still have code work.

I also REALLY, REALLY WANT to be bale to say continue/play the timeline up to a specific point, whether that point is ahead or behind the current timeline position. I waste a ton of time implementing that using javascript.


I did write an extension to start and stop a timeline at specific points. The constructer can be a bit complex.

But thinking about it now the Stop timeline at a specific time can be a simple JS along with a keyframe action set on the stop time.

Normally I would be inclined to use the API to get the current time in the timeline. But in this example we use a keyframe Action at the specific time on the timeline to triggers the JS.

The JS will then check to see if a global var is true or false and act accordingly.

The global var is set by (in this case) a button the goes to the same JS function and sets the global var.
(it can be in a separate JS but I like doing it this way).

So if the seven second button (id= t2Seven) is clicked the timeline will stop at seven seconds. If the button is not clicked then it will continue on to the full ten seconds.

I expect you can update the global var from most element action…

The main JS is simple enough not to be a pain.

	 if (!window.sevenSeconds){  window.sevenSeconds =false; }//-- set up the global var once
 if (element.id == "t2Seven" ){//-- only run here if seven second button is click.

//-- update the var 
window.sevenSeconds = true;
return;//-- exit
	//-- run if triggered by a timeline
	if ((event.timelineName == "t2") && (window.sevenSeconds)){
	//-- reset var so we can run the timeline again if we want
	window.sevenSeconds = false;

stopTimelineAT.hype.zip (19.8 KB)

Nice example - I already do this without using a timer. It’s not that it can’t be done, but that it should be doable in the Hype UI without having to jump through hoops in JS. There should be a “playTo()” function that plays to a specific time ( or label!), regardless of where the playhead currently is.

Hey gang,

I’m looking for something a bit related, the equivalent of “Animate To Time N”. At the moment, we can jump to a frame in an animation, but is there a way to animate to a specific frame from the current frame? Or should I post this as s separate topic?



We are asking for essentially the same thing, Peter.

It’s a really surprising omission.

Depending on what you are doing you can animate to a specific time by adding a stop action at that time, but I need something more sophisticated than that.

So if you are at 1second on the time line and have a stop action at 4seconds, the n the timeline can play for three seconds before stopping.

That’s not possible for the behaviours I am modelling.

I second this. Labeled keyframes seem very obvious.

I had put in a related request for support of markers, which are standard in video and audio editors. You name the markers as you wish and you can set things so that you can animate to / snap to markers or not.

1 Like

Yes, that’s the same thing really. I need to play the timeline in either direction.

You can’t name them, but it is easy enough to have them hit the timeline keyframe and reverse. Check out the capo function, as well.

I want to be at any position in the timeline and be able to play in any direction to any other part of the timeline before or after the current position. Any part of the timeline needs to be able to play to any other position of the timeline.

I have achieved this but it was a real pain to do it. I just wanted to go “play to time x”, not to engineer a solution ( which involved a load of javascript).

I’m trying to build an application that shows progress using a hype animation. The first unlockable would be, go to label “s0” and play until next stop keyframe. The second unlockable would be go to label “s1” and play until next stop keyframe. Etc.

With a naming convention like this, it would be possible for my server to dynamically generate the next unlockable to show and be able to figure what was the last unlockable the user was at. Then on browser refresh the animation can go where the user left off instead of playing from the beginning of the animation. This labeling feature is imperative in order to save the users state in an animation and to have a server generate the unlockables without any knowledge of the timeline and the times. Right now, we can only traverse the timeline based on seconds. This is not ideal for my application because as soon as an animation is made longer or shorter then the users state is invalid because the only way to keep state currently is in seconds.

Hi Nathan!

Totally support the “Label” request - but here I’m focusing on a possible solution for your immediate needs. Just “thinking out loud” here as I do not fully understand your set-up, but…

It seems like You are trying to create discrete units - malleable chunks of time - where the start & stop times on an absolute scale (i.e. the “MainTimeline” for an entire project) are irrelevant. You simply wish to call label “sO” and play it to its stop keyframe. Ditto label “s1” etc.

If You can grab a “Label” name in your scheme You possibly could do the same for Symbol names. Symbols are independent entities (chunks of time) - scenes within a scene.

You could play the Symbols as You would a label - but You actually have more control with Symbols. You can play Symbols as You need them. Changing the start~stop for one symbol would have no effect on the others.

Symbols might fill the bill for your application.

Just some thoughts.

Hi Jim,

The project I’m working on is a web application where a user would log an entry for a day which would trigger a chunk of the Main Timeline to play; up until a stop keyframe is hit. Each scene is 14 days worth of unlockable chunks ( s0,s1,s2…s13 ). This scene builds as the user logs each day. So, elements that were added to the stage at day 1 could then be altered by an unlockable action in day 5. My scenes contain sequential chunks that need to be aware of the final states of the previous actions and properties brought unto the stage. Since a symbol has an independent timeline, set of assets, etc. I don’t think they would solve my problem, I would not know the final states after an unlockable time chunk to base the properties of the next symbol after. Hopefully that adds some clarity.

Hi Nathan!

I’m creating (2) demos each showing a different method of using of Symbols as pseudo Labels; and I also need to do the write-up. Not enough time to finish right now, but I should have things complete by tomorrow early evening (Pacific Daylight Time). I am also going to start a new thread (“Symbols as pseudo Labels”) as we are veering off topic here.


Thanks for taking the time, Jim.

I look forward to seeing your creation.

Hi Nathan!

I will not be starting the topic “Symbols as pseudo Labels” because it turns out I could not create an easy to use solution (compared to using an “actual” Timeline Label). I tried to take one of the two demos I created for You and make it accessible and simple enough for general use; but there were too many options on the “flowchart” that required solid knowledge of Symbols and involved several steps. It failed the simplicity test.

So I am going to PM You with the “original” two concepts I designed that may have some value for your particular needs. And I will be signing off here on this off-topic subject.

From what I understand, You would still need to send the server data so it knows what stage the user was at.

I am not seeing why that cannot be the current time on the main time line of the scene and the current scene name.

The server then just has to use that info when sending info back or use it to cascade down a logic tree to pick what to do next…

Originally I thought that would work, too. But its a flakey solution for the following reasons:

  1. how could replay be emulated? For example, if I want to replay the last unlocked animation without playing from the beginning of the timeline. The only way that is possible is to call the goToTimeInTimeline method, which will simply not work for me.
  2. what if client fails to tell server where user is at in timeline? Then the users state is invalid and potentially misses seeing an unlock-able chunk. I want my server to provide state, and have the animation do what it needs to do based on number inputs.

Here’s what I would love to see if the hypeDoc API:

hypeDoc.goTo (sceneName, labeledKeyframeOrTime)
hypeDoc.playTo (labeledKeyFrameOrTime, [fromLabeledKeyframeOrTime])

Or at least attach an object to the timeline that tells developers the labeled keyframes and the time in secs they are at. Adobe Animate CC does this.

{ label1: 0, label2: 3.4, anotherLablel: 4.5, label3: 5.0 }

If hype could expose this data structure then developers would have a better API to navigate within an animation.

These already exist in the form of hypeDocument.showSceneNamed() and hypeDocument.goToTimeInTimelineNamed()

The one think it does not have is the .playTo (). This I agree is a good thing to have. I did write an extension that does this but in all honesty it is a hack.

I do not understand why.

You still have to let the server know what point the timeline and scene is at and later pass that back.
It is just info. It being a label name or a time frame,
The server will deal with what ever you pass to it because the functions I assume are written by you.