Relative timeline issues


(Rich S.) #1

Really frustrated trying to figure out how to get this to work. The idea is that when the user clicks on one of the bubbles, the timeline that’s currently showing reverses, and the one that’s newly-selected plays forward. That way the bubbles move smoothly from any current stage to any clicked stage. Something’s getting in the way, and no amount of debugging is getting through.

The closest I can get to the way it should look is clicking bubbles in this order:
PPD role
Proposal
Completion
Engagement
Completion
Reporting

The blank spaces will eventually contain sub-nav selections under each of the given areas (step 1, step 2, etc.)Navbar test.hype.zip (966.9 KB)

Clicking the items in the above order works great. Any other order is all screwy.

Any help very welcome. Project attached.


#2

I think this is fixed. Just had to establish the beginning keyframe for all the bubbles.Navbar test2.hype.zip (965.9 KB)


#3

Actually, just noticed there are still a few glitches so I must have missed some but pretty sure that’s the problem. You have to make sure every element in every timeline knows where “home” is.


(Rich S.) #4

Wow, hadn’t even thought about “blank” keyframes for stuff that wouldn’t change.

I owe you one TwoPutt!


(Rich S.) #5

So I got closer, but having issues changing scenes while keeping the symbol’s animation.

On click of any element, I want to reverse the timeline so the dots go back (like when you click Proposal), then jump to the appropriate scene. But doing two onClick actions - run the Go() JS and a Jump action - appears to skip the timeline reversal and runs right through to the scene switch (so you don’t see the reversal).

I know each symbol needs its own ID. I suppose I could replicate each symbol, but then I’d need a different script for each scene. Makes me wonder if I should even be using symbols for this.

Ideas welcome.

Navbar test 2.hype.zip (995.2 KB)


#6

Hmmm. Not sure if this will work in the bigger picture or not but changing it to a persistent symbol makes the effect work a bit better. Not sure if it would cause other problems though,Navbar test 3.hype.zip (975.4 KB)


(Rich S.) #7

Funny I had tried persistent before but no love. Now with a few cleanups that works. Only thing that bugs me is the warning that the menu objects do not have unique names (“Completion”, e.g.) but perhaps that’s ok with persistent symbols.

Thanks again! Final attached.

Navbar test 4.hype.zip (1000.7 KB)