Timeline starting point in relation to other timelines

I have 3 buttons; A, B and C
I have created 3 seprate timelines which are triggered with the 3 seperate buttons
When mouse move over a button (A, B or C), the correspondent timeline (A, B or C) is started
When mouse out the timeline is reversed

But is there a way to let a timeline finish before the next one starts?
Now when I move quickly over all buttons, all three timelines start after each other.

One way to do this is to have the an animation in the timelines physically obscure the other buttons during playback -- so when one is playing, just have a small invisible rectangle cover the button(s) to block mouse over events.

1 Like

Hi Daniel, thanks for the reply.
I also thought of that but unfortunately this is not possible because it’s an ad, doesn’t look good.
I also thought about covering the other timelines but that’s not possibly either due of the complexity of the timelines. :neutral_face:

A little complex but maybe you can do yours around this idea.

We set B and C timelines up so if their buttons are clicked the just reverse back to the start.
Their animations start well beyond the 0 frame so we should not see any animation when that happens.

When A time line is complete it tells timeline B to go to a point on the its timeline After the reverse action and pause. Once this happens the B button will continue the timeline in the normal direction.

The B timeline reaches it’s end and does the same for C.

You in effect have cascading timelines.

Cascading timeline buttons .hype.zip (18.7 KB)

2 Likes

I have a slightly different understanding than @MarkHunte’s.

Your request as I understood it was using “Mouse Over” (play timeline forward) & “Mouse Out” (play reverse timeline). The selected timeline must finish before others can play.

If the user can simply slide the mouse around You need to disable the 2 buttons that are not playing their timelines otherwise the user will be confused as to what is going on. The standard way to do this is giving a visual indicator the button is currently not functional.

In this demo the disabled buttons go grey until the timeline is finished “reverse” playing for the selected (“Mouse Over”) button. As soon as the mouse is moved off the button the timeline reverses and then all the buttons become available again.

On-line Demo here.

Hype Project file: Timeline_Delay.hype.zip (16.0 KB)

2 Likes

I forgot about mouse over and used click but not sure that’s a real difference in my approach.
Just change the action from a click to mouse over…

But I see what you are saying and I think you picked up on what they were after. with the reverse on mouse out.

1 Like

And disabling the buttons whose timelines are not running - especially with Mouse Over~Out as the interface. Things could be confusing as to what is triggering actions if there is a required “finish” to a current action before other interface elements become available.

1 Like

Thanks guys, nice solution! :+1:

2 Likes

I’m looking for a similar effect except in my case, if the user clicks A C B, I want the blocks to descend in that order but each block animation wouldn’t start until the last was completed. Is this possible?

Yes. How are You at coding? I can’t think of a non-coding way to meet your request.

If You are at least somewhat conversant with coding (beginner will do) You could create an array. You can read about arrays here.

EDIT: I just read another thread You are participating in so that question is answered affirmative.

General Concept - i.e. one way to do it
Each button click would trigger a function that would populate the array with the ID of the button just clicked. The function would also disable that clicked button and check how many items were in the array. If the number of items in the array matched the number of “target” buttons (in your example “3” items ACB) then the timelines would be triggered based on their place in the order of the array.