GetCurrentTimelineTime();? / currentTimeInTimelineNamed

Using JavaScript with Hype
1

Hi -
Is there some part of the Extension Project or just in the normal Hype API that allows for getting the time of a certain timeline?

I’m asking because I’d like to do something where only certain actions happen when the timeline is between Xseconds and Yseconds.

I know there is a way to do this directly on the timeline but I need to do a great many things with this info.
Is there another way to approach this?

To be more specific…I have a series of elements (more than a dozen) and I’d like them to change color as the timeline progresses and change back to the original color when the next button changes. I cannot simply add these changes on the timeline because the buttons when clicked jump to a different part of the timeline. Therefore, if the user clicks a button the timeline edit will not changed the button back to its original color.

2

If you look at the docs or in the function editor library you will see this staring back at you with a perplexed look of “how did you miss me?"

hypeDocument.currentTimeInTimelineNamed('timelineName')

3

Thanks Mark. I do see that. I guess I was asking an even more nube type question: Can I add an event listener to the time of the timeline as it updates?

So, obviously yes, right?

4

I’m trying the code below. It works when the timeLine is at 0 but not as the timeline progresses.

var currentTime = hypeDocument.currentTimeInTimelineNamed('Main Timeline');


 switch(true) {


 case  (currentTime >=0 && currentTime <=10):

 hypeDocument.getElementById("play").style.backgroundColor = "lightblue";

 break;


 case  (currentTime >=11 && currentTime <=20):

 hypeDocument.getElementById("play").style.backgroundColor = "white";

 break;



 default:
    
      return;
      
 }
5

There’s not currently an event generated for timeline time changes.

The two basic techniques are:

  • Use your own timer (via setInterval or requestAnimationFrame) and check the timeline time. Be aware of resource management and making sure to not eat unnecessary CPU.
  • Create an animation with a Math Equation timing function and as this is javascript, call out to your own function callback here.

(side note, this was recently done for a different purpose by @MaxZieb in this post and I believe generalized with a timer/callback in this one).

6

If you don’t jump in the timeline you can also just ad timeline actions and fire “custom behavior” to trigger your actions.

7

Thanks for your help.
@MaxZieb 's example is a bit beyond me and I’m not able to understand exactly how it is implemented. If anyone has time to post a more simplified example using this technique for the time line so I can better understand this that would be great.
Thank you!
Matt

8

Hmm,

I like this idea..

So as a quick test I aliased a function inside a hype function like this.

// element - DOMHTMLElement that triggered this function being called
// event - event that triggered this function being called
function timr(hypeDocument,element, event ) 
     
    window.hypFunc = function(){
     
        var ell= hypeDocument.getElementById('txt')
      	var timer = hypeDocument.currentTimeInTimelineNamed('foo')
      	 ell.innerHTML = timer
      }
      
    }

And set the timr hype function to run on prepare for display.

I then set one of the foo timlines start keyframes to a Math Equation.

53
531874×928 145 KB

function (t, start, dur) {
  try{
 window.hypFunc()
  }catch(err){
console.log(err)
}
   return t / dur;
}

Math Equation function.hype.zip (14.9 KB)

3 Likes
9

Yes! You can even forward the parameters as seen in take2 here. The problem with Math functions they don’t have any value context and you can only measure their progress. The moment you offset them or want to sample them backwards you will have to look at the start value to see in what direction the progress is actually progressing and adjust the callback accordingly.

10

Here are some samples. I added a timeline draggable element that controls the main timeline to make the point clearer. I also used a custom behavior so we don’t have to hard code the action. Many components could react to the “signal” this way.

Here is a sample using regular timeline actions. Works fine as long as the timeline is played without jumping over the trigger points (by dragging it over or using the API to set the time offset).

Demo:
TimelineProgress_TimelineActions.html

Download:
TimelineProgress_TimelineActions.hype.zip

In this example we are using Hype AnimationFrame to check every single animation frame if we have to triggered the action.

Demo:
TimelineProgress_HypeAnimationFrame.html

Download:
TimelineProgress_HypeAnimationFrame.hype.zip

Hope this helps!

2 Likes
11

Thank you @MaxZieb and @MarkHunte !!

I was able to use a form of Max’s Hype Animation Frame example and it works perfectly. When I’ve completed the file I’ll post here to share.

Thank you!
Matt

1 Like
12

For future reference. The version from @MarkHunte is also very smart as it has no dependencies and uses the built in Math Equation. I tweaked the structure of Marks file to look like the other two solutions to underline the full potential of Marks approach. It also fires only when Hype’s playhead is passing through the area of the animation seen in the GUI! I created the two solutions as they where suggested by @jonathan and it was mentioned that they are beyond understanding.

I recommend the solution of Mark!

@MarkHunte’s version is here:

Demo:
TimelineProgress_MathEquationFunction.html

Download:
TimelineProgress_MathEquationFunction.hype.zip

2 Likes
13

Yes, I made a version of my project with @MarkHunte 's technique as well and it is great!

Thanks all!

Matt

1 Like
14

Thanks to all for this valuable discussion! :+1:

2 Likes