Timelines and Previous Timelines

I Have a Navigation in which i want to control multiple timelines. Im sure JS is the way to go and i would appreciate any help anyone could give with me being new to Javascript.

In my example i have a Navigation that controls two timelines. Ultimately i will need to control 8 different ones.

If i press the “move to green” button, the timeline will center the green object and some text info will appear.

What i Want to Happen is this:

Now that The green is showing with info, when i click the “Move to Blue” button, it will slide the timeline to blue and continue the previous timeline so that the info disappears.

As it currently sits, The info remains showing whenever i click the buttons multiple times. nav_control.hype.zip (20.8 KB)

5 downloads before I got here and no-one helped tut-tut :smiley: :smiley:

Here is an adaptation. Basically, as you were going back to the beginning of each timeline I got rid of the extra bit at the end. If you wanted that bit in, no problem you can use the same principals. It might not work as expected but I think the gist here is to understand relative timelines a bit more.

Here is a copy of my version based on yours.

nav_control-vDBear.hype.zip (20.0 KB)

This is great! The only problem i see is if i have a lot of timelines i wold have to have many actions on each navigation button.

For instance if i had 10 time lines I would have 11 actions on each navigation. I guess i need to look at your basic principal here and possibly make a JS array to put it to work to only have one action verses multiple on the navigation.

Without looking at your efforts in file as I am on the phone maybe you should consider using setElementProperty to move things around.

I’ll be back in town (on my desk) tomorrow … if it ain’t solved then without getting crazy on multiple timelines let me know.

@Valkolimark
You could just transfer it to a function and run that (based on the ID’s of the buttons)

if (element.id == "t1") {
	hypeDocument.continueTimelineNamed('t2', hypeDocument.kDirectionReverse, false)
	hypeDocument.continueTimelineNamed('t1', hypeDocument.kDirectionForward, true)
} else if (element.id == "t2") {
	hypeDocument.continueTimelineNamed('t1', hypeDocument.kDirectionReverse, false)
	hypeDocument.continueTimelineNamed('t2', hypeDocument.kDirectionForward, true)
}

This is based on the buttons having ID’s t1 and t2 respectiviely

Nice. I will implement right now and see what I come up with. Thanks for you help and i will be in touch! :smiley:

So here it is implemented. This is a great way to have 1 call.

would it be prudent to write some kind of loop to reverse the alternative timelines? For Instance if I had something like:

if (element.id == "t1") { hypeDocument.continueTimelineNamed('t2', hypeDocument.kDirectionReverse, false) hypeDocument.continueTimelineNamed('t3', hypeDocument.kDirectionReverse, false) hypeDocument.continueTimelineNamed('t4', hypeDocument.kDirectionReverse, false) hypeDocument.continueTimelineNamed('t5', hypeDocument.kDirectionReverse, false) hypeDocument.continueTimelineNamed('t1', hypeDocument.kDirectionForward, true) } else if (element.id == "t2") { hypeDocument.continueTimelineNamed('t1', hypeDocument.kDirectionReverse, false) hypeDocument.continueTimelineNamed('t3', hypeDocument.kDirectionReverse, false) hypeDocument.continueTimelineNamed('t4', hypeDocument.kDirectionReverse, false) hypeDocument.continueTimelineNamed('t5', hypeDocument.kDirectionReverse, false) hypeDocument.continueTimelineNamed('t2', hypeDocument.kDirectionForward, true) }

nav_control-vValkolimark.hype.zip (20.9 KB)

You could (and this is thinking off the top of my head) have an array of the timelines and search the array for the element.id that is clicked and then remove the associated timeline from the array. And then run a loop on the remaining timelines that runs the Hype “continueTimelineNamed” method.

Something like:

var timelines = ["t1", "t2", "t3", "t4", "t5" ];
var index = timelines.indexOf(element.id);

if (index >= -1) {
    timelines.splice(index, 1);
}

for (var i=0; i < timelines.length; i++) {
    hypeDocument.continueTimelineNamed(timelines[i], hypeDocument.kDirectionReverse, false)
}

hypeDocument.continueTimelineNamed(element.id, hypeDocument.kDirectionForward, true)

This is just off top of head haven’t had time to check if it works :wink:

2 Likes

That was the ticket. Wow. I need to really practice JS to grasp the concepts better.