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.


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:

(Mark Hunte) #4

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)


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)

(Mark Hunte) #6

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.


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.


Thanks guys, nice solution! :+1: