Animation on hover out

Oct 02, 2015


I have an object(Obj1) that I have set an entrance animation and a exit animation. As default I have set the state to 'hidden' and have created a trigger to change the state to 'normal' when the user hover on another object (Obj2).

When I test this, the entrance animation works fine when I hover on Obj2, but it will not work when I leave the object. The state will change to 'hidden' but the exit animation will not play.

Basically I am trying to mimick this template so I know it is possible... 

Any help would be appreciated.

16 Replies
Midi Prefix

You'll probly notice that on that example, when you "Hover out" your actually Hovering ON to something else. There is a trigger for Hovered over, but not hovered out.

You could try setting a trigger for 

When State of (hovering object) is NOT hover, run the hover out animation.

Or you can use hotspots outside of the object and use hover over triggers there.


There are other possibilities too, but you need to get creative when the function you want, simply doesn't exist in the software your using.

Midi Prefix

The only way to "run a specific animation" that I know of, is to show a layer.

When a layer is shown, it plays it's time line. That could include the "animations" that storyline uses for objects.

It took me a minute to work out what you'd done, but essentially, your trying the same thing really, just using a state.

When you set the state of the dark rectangle object to normal (from hidden) it is effectively like showing a layer, in that it's timeline begins.

As you are using the entrance and exit animations, if you keep the mouse over the rectangle, it will play the entrance animation, then, when it reaches the end of it's timeline, it will play the exit animation. This isn't really what your after.

It SEEMS like it would make sense if when you used the "Restore on mouse leave" function within a trigger, it would then run the exit animation, but that's not what happens. It just resets the object to the hidden state, there's no timeline involved, so it instantly disappears.


I've come up with a way of doing it, though it's needlessly complicated, someone else may have a better way, and I'd be interested in seeing it.

The way I've done it, is I have made two layers for each square. One of the object with a short entrance animation on it (but not exit animation) and one with the exit animation (but no entrance animation)

When you hover over one of the squares, it shows the relevant ENTRANCE layer. Within this layer, it also sets a variable, which tracks which object is being hovered over.

When you hover OVER any other square, it checks which square you were hovering over (the above mentioned variable) and shows the relevant EXIT layer.

This means you need a variable for each square, two layers each square, and 8 or so triggers for each square as well, which is.... complex really. But it would do what you wanted it to do.


I have attached a .story file, which has just one of the squares set up (the purple one at the top) and leaves what you had there in place. Hopefully this helps you somewhat.

When previewing it, try hovering over the purple square, then mouse off to anywhere but the blue squre you already had set up, as that one could interfere with it still.


Peter Hermansson

Thank you. I see what you have done there and it will work as long as the user stays on the colored squares, but if they move the mouse outside of the 'board', they will keep their state. In the example I am trying to copy, the 'exit animation' runs also when they leave.

And I also think that there will be a lot of triggers for this. I really appreciate your time and help and I will keep on looking for a simpler way. If not I will try to use your suggestion.

Thanks again. 

Midi Prefix

Yep, you'd need hotspots outside of the menu area for that, though it fills the entire slide in this instance.


Looking again at the example... You'll notice that the text gets blurred during the animation stage. It's possible they are actually using video files for the animations, which might have more functionality.

The problem is still going to be that there is no native "Mouse off" trigger though I would think.

Walt Hamilton


To create an animation for a hover state on Object1.

Create  object2 that is what you want the hover state to be, and set an animation on it. Then copy object2. Edit  object1's state and create a hover state. Paste Object2 as the hover state. When you do that, it keeps its animation, and you can edit it using the animation tab.

In short, I don't think you can add an animation to a state, but you can add an object that has an animation, and it keeps it.

This discussion is closed. You can start a new discussion or contact Articulate Support.