Pause/ resume timeline with mouse over and out

Animation
1

Newbie question: how can you add a ‘pause/ resume timeline with mouse over and out’ function? And so that it doesn’t matter where above the scene your mouse is?

2

2 relatively simple ways:

  • Use an element as big as the “Scene” (You can set it’s opacity to 0 so it’s invisible) and create the appropriate Actions in the Inspector “On Mouse Over” and "On Mouse Out"
  • Use code and run it “On Scene Load” if you are into using code. Listening for the “mouseover” and “mouseout” events on the “element” parameter. (which is the scene)

N.B As you have not specified anything else then these suggestions will work as intended but if you have other elements that need interaction then you may need to change the approach

2 Likes
3

Thanks for your reply!

Unfortunately the first solution, with the element as big as the scene does not work somehow, is this perhaps browser related? I’mse Firefox on a Mac. Besides that, there are clickable elements in the scenes which are covered then and not working anymore.

And do you perhaps have an javascript example of what to add wiht the One Scene load method?

4

I played around and managed to get it to work with the On Scene Load method:

The code to add as javascript at On Scene Load of every scene - read the instructions about the correct names of the timeline in the code!

// This function pauses timeline at mouse over and resumes it at mouse out of a scene
// Replace the two 'Main Timeline' names in the code below with your own timeline name.

function mouseoverpauseresume(hyperDocument, element, event) {
element.addEventListener("mouseover", mouseOver);
element.addEventListener("mouseout", mouseOut);

function mouseOver() {
  hypeDocument.pauseTimelineNamed('Main Timeline');
}

function mouseOut() {
  hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, false);
}
}
1 Like