Pass Value to Timeline and Use in Timeline Action JS Function

1

I have a scene containing two elements: a button and a rectangle.
When the button is clicked, the animation moves the rectangle and at the end of the timeline a timeline action runs a JavaScript function.
I would like that function to use a value that has been passed to it by the function that was initiated by the Button element.

Is this possible?

Pass Value to Timeline.zip (39.6 KB)

2

Making the ‘valueToPassToTimeline’ variable global can do the trick. It’s not superclean, but probably the best solution for your current situation: Pass Value to Timeline.hype.zip (37.1 KB)

You can make variables global by putting them into your HEAD HTML -> Inspector -> Document -> Edit Head HTML. In this case you are not really ‘passing’ anything from one method to another, but it works.

If you don’t want to use globals, you can create a getter-setter principle, in which the button sets a variable in a specific scope, and the output-method gets the variable (through a return-method for instance). I’m not quite sure what the exact scope of your project is, but a global variable in JavaScript isn’t all that superugly (only a bit ugly). Best practice is to not use globals, buy hey, it’s not stupid if it works :wink:

3

Thanks, Vic. Unfortunately, I cannot use globals. The button itself is dynamic and is subsequently replaced by another after it is clicked which then waits for the user to click on the new button. This happens x-times, and will propagate a different value(s) every time.

What do you mean in your last paragraph? Do you have an example of the principle mentioned?

P.S. I used a “button” in this example for simplicity sake.

4

So you want to have the different buttons trigger different animations (and therefore you need a specific variable-value pér timeline)?

So let’s say I press button 1, timeline 1 runs and it outputs 1, but while timeline 1 is running I can already press button 2?

5

Nope. There are a number of elements within a group that has an eventlistener on the group element that is delegated and listening for each of the elements in the group. When one of those elements is clicked, the generic timeline is run and at the end, the timeline action runs a JS function that needs to know the details of the element that initiated the click/touchstart. In my prior example, the “button” represents the “group element” mentioned earlier.

The bottom line is that I would like the timeline to be aware of what function started it and carry along with it the parameters passed to it by that initiating function and be able to use those parameters at will.

Does that make sense?

6

A quick thought would be to give each element a new class when clicked. And Also give it a new attribute.

So in the runTimelineAndPassValue()

//-- let get rid of any existing callers
    var caller = document.querySelector('.caller') ;
    	 if (caller ) {
    	 caller.classList.remove(valueToPassToTimeline,"caller")
    	 element.setAttribute("inputVar","")
    	 }
    	 
    	
//-- now add the new caller
    	var valueToPassToTimeline = 10;
    	element.classList.add("caller");
    	element.setAttribute("inputVar",valueToPassToTimeline)

in the outputValue()

var caller = document.querySelector('.caller');

 alert("Value passed by the initating function outputValue():" + caller.getAttribute("inputVar"));
1 Like
7

Is there only one timeline?
Do the buttons retrigger the timeline or are they ignored once the timeline is running?
Do the buttons ovverride the value of the timeline?

8

I think in an attempt to simplify and make generic the request, I may have muddled the whole issue. And I could be doing that again… I hope not.

Function A (which contains variables/values to be passed) —> Initiates Timeline —> Timeline Completed & Runs Timeline Action JS script using values passed to it from Function A.

Function A is meant to be generic, which means that depending on where in the application it is called, different parameters are supplied. Thus when the timeline is initiated and completed, the timeline action JS script proceeds according to the data passed to it from whichever function ran the timeline.

For example, I know I can pass data (varA, varB, etc) to be ingested by a function (for example, “genericFunction”) defined in Hype:

hypeDocument.functions().genericFunction(hypeDocument, [element, varA, varB, etc], event);

I would like to do something similar for the timeline action JS script that is kicked off at the completion (or whenever) of the timeline.

As Vic mentioned earlier, this could be dealt with using global variables. However, when targeting mobile, garbage collection matters a great deal and global variables will not be cleaned up. I already have too many of them. :wink:

9

I am pretty sure the method I mention should work?. Is there a reason you don’t think so ?

10

Actually Mark, that would work and what you suggested provides a more efficient way of dealing with a different issue that I had previously “solved.” Thank you for your persistence!

1 Like
11

Thanks again the suggestions and following up, Vic!

12

Sure no problem. An interesting issue! I’m gonna test Mark’s suggestion as well, as I can probably use this in my own projects as well!