Pass value of variable from one Javascript to another


thanks for that fine piece of software which i am starting to love.

I am working on a dummy for a project and for learning purposes i am trying to mix and put in everything i can imagine.

What i have done so far:
CSS is working -> the gradient animation in background

Sliders that output values (thanks to this forum i got a very good tutorial)-> Here is my first problem. Every slider has its own Timeline with 100 frames for 100 counts of the variable in the javascript (amounts()). Why is it counting only till the value 3?

next thing is:
How do i pass the slidervalue to the other javascript (mychart()) that feeds the chartjs library which for testing is set to 33 for every segment?

Is there anything else i should or could do different or better? (294.3 KB)

Thanks for any help.

Would you mind providing a bit more detail with specific steps to reproduce the problem and how you see the issue? I'm not sure I follow what actions in the document that need to be done or how to see the problems you hit. It'd be good to call out what elements to interact with/look for. Thanks!

1 Like


returns the time in seconds and not frames. so if you'd like to get a percentage one possibility is to compare it to the duration of the timeline.


having two separate hypefunctions exchanging arguments can be done by setting the vars in an environment that both can reach (like window or hypeDocument.customData) or passing args directly in a functioncall

Hi and thank you for your reply.

I don´t get it. I need 100 steps for representing 100% for each slider. I would like to make the chart interactive and controllable with the sliders.

How can i achive that?

Thank you for your help!

hypeDocument.customData.myPercent = Math.round(hypeDocument.currentTimeInTimelineNamed('timelineName')/hypeDocument.durationForTimelineNamed('timelineName'))*100;

you could update this on drag and fetch the hypeDocument.customData.myPercent for the chartValue

1 Like

Thank you,

i tried your suggestion but now the counter jumps from lowest position of the slider 0 to 1 at the highest position of the counter.

This is how i used your snippet:

	// gather amounts
	hypeDocument.customData.left_Percent = Math.round(hypeDocument.currentTimeInTimelineNamed('left_slider')/hypeDocument.durationForTimelineNamed('left_slider'))*100;
	var amount1 = hypeDocument.customData.left_Percent;
	//var amount1 = hypeDocument.currentTimeInTimelineNamed('left_slider');
	var amount2 = hypeDocument.currentTimeInTimelineNamed('middle_slider');
	var amount3 = hypeDocument.currentTimeInTimelineNamed('right_slider');

	// calculate sum
	var sum = (amount1 + amount2 + amount3);
	// get elements
	var amount1Element = hypeDocument.getElementById('amount1');
	var amount2Element = hypeDocument.getElementById('amount2');
	var amount3Element = hypeDocument.getElementById('amount3');
	var sumElement = hypeDocument.getElementById('sum');
	// set elements to new values
	amount1Element.innerHTML = amount1.toFixed(0);
	amount2Element.innerHTML = amount2.toFixed(0);
	amount3Element.innerHTML = amount3.toFixed(0);
	sumElement.innerHTML = sum.toFixed(0);

my bad ... cause i didn't test my suggestion .... :slight_smile:

the paranthesis was in the wrong position :see_no_evil:


should be 0 to 100 in Numbersteps.

btw you can always log values to console to see what's going on: Window Console Object

1 Like

Baaaam. Thank you! That is working perfect.

Now... Do i get the data to the other js script through "hypeDocument.customData.myPercent"?

if this key is initialized once, you can use it in every other hypefunction

1 Like