mouseOut not clearing loaded timeline

I’ve got a notated diagram, where I rollover an element, it starts a timeline with a text panel which fades in (opacity), up to a pause frame. On mouseOut it starts playing the same timeline till the text panel fades out.

http://rezolve.4pixels.com/banks-and-telcos/about-us/index.php

It works OK but any quick movement of the mouse and the text panels start to stack instead of each one clearing from the scene efficiently. I’ve tried changing the mouseOver to a click, but still get some random rollover behavior.

How can I make this work cleanly/efficiently?

The issue appears to be that you have a pause action halfway through the timeline, but a mouse out can occur before then, so instead of doing the fade out, the continue for the mouse out just still gets to the pause point.

The easiest way is to simply have the animation do a fade in. The mouse over can be a continue action that plays forward. The mouse out can be a continue action that plays in reverse. This way you don’t need the pause timeline action and it will reverse or continue the fade from wherever you’re at.

1 Like

Thanks Jonathan, works perfectly now. What’s the difference between using a Start Timeline and a Continue Timeline in this case on the mouseOver?

‘Continue timeline’ can help make animations smoother because it doesn’t jump around; it continues the current state you’re at in the timeline. Since a mouse can be ‘over’ then ‘out’ then ‘over’ again in the span of a second, giving the timeline a direction in response to these events is better than roughly mandating that it restart at a specific state after each over or out.

Start will always go to the beginning (time 0) of a timeline, but continue will play from wherever the playhead is currently located.