Animation using MouseOver and relative Timelines

So, I’m trying to work on something here and I just found a bit of an issue while working on it.

I’m trying to animate these squares so that when you MouseOver one them, they’ll all move so that the one you have your mouse over is on display. Like this

That works perfectly, BUT since I’m working with relative frames, when I move from one mouse over to the next one, without waiting for the previous timeline to finish, it uses the relative position of the current state, causing weird results

Is there a way to fix this? Any ideas are welcome!

Here’s the hype file, also. (13.1 KB)

This may or may not be the solution to my problem.

I’ll check back tomorrow

Okay, I found a way to fix the main problem and I have a partially working version here (16.5 KB)

The thing is, If I move the mouse quickly over the circles, it won’t detect the last Mouse Out action… and the animation will get stuck on the last mouse over.

Any help?


There seems to be an issue with the mouse over~out event timing. At a certain point if the mouse is traveling too fast the elements do not correctly register the event.

One solution:

A Javascript function (“delayMouseOver”) is triggered with Hype’s “Mouse Over” action for the grey “Rectangle”. This code delays the “Mouse Over” firing by “0.5” seconds (500 milliseconds).

setTimeout(function(){ hypeDocument.continueTimelineNamed('Inicial', hypeDocument.kDirectionForward, true); }, 500);

The circles will reset themselves 500 milliseconds after a fast moving mouse enters the grey “Rectangle”. I found setting the value in the code any lower than 500 (i.e. a faster response) would not trigger properly.

Demo here.

Project: (18.5 KB)

1 Like

Oh dude! Thanks! that works great.

It doesn’t solve the problem if the person moves the mouse over one of the circles and out of the frame, but you really did help me! My question is, is this Mouse Over~Out issue worth a bug report? Is it really a bug after all?

1 Like

well hype depends on browsers capabilities with those mouseevents -> in good and bad :slight_smile: so i would file it as an browserissue and not hyperelated.

1 Like

Ah Okay! Thanks for the info!

what about running the script on mouse out for the parent group instead of the event for the grey rectangle … shouldn’t that work¿