Fade in AND out


I have a slide with layers that fade in (using the built in fade) when the mouse hovers over an object.

I would like them to fade out when the mouse moves off of that object.

If I put a fade out on the objects in the layer, then they stay for a while then dissapear. If I could stop the timeline at a certain point and restart it when the mouse moves off of the trigger, that would work.

Is there a way to do this?



18 Replies
Mike Enders


As of now, there's not a method to get the objects to do a smooth fade out using the hover trigger.   However, if you change your method to having the user click objects, there is a little trick to getting objects to fade in and out by using hidden objects, state changes, a tricking the timeline.  I've attached a sample file.

  • What you do is add a selected state to your object that you wish to fade in and out.
  • Start the object in the hidden state
  • Add two triggers to (1) change the state of the object to normal when it's selected and (2) to change the state to hidden when it's not selected.
  • Now, on the timeline, alter the object so that it's only present for the minimum amount of time.

Ultimately, if you could add your voice, I think it would make a great feature request to be able to apply a fade out to layers (especially on the restore on mouse leave option.  http://www.articulate.com/support/contact/submit.php?form=feature

I hope this helps!

Mike Enders


Cool work around.  It might get tricky with multiple objects on the screen, but I like the idea!

I would add one tweak...

On the large hotspot, I'd add a condition to the trigger to show the layer if the state of the image is normal.  This will remove the initial firing of that layer when you are moving your mouse to the object.

Thanks for sharing your idea!


Matthew Kliewer

You could also possibly add (copy/paste) the hover material as states of the text boxes, rather than slide layers. That (generally) allows for animation in/out.

It's not as convenient, but if the transitions are important, it may be a way to go. It may require a bit of reorganizing layers so as not to overlap on-screen.

Michele Rourke

Where can I find a tutorial on how to hover over objects and have them appear in color while the rest of the photo is in the

background in black and white.  I have a photo that has 12 people in it.  I would like the photo to start out in color, then fade

to black and white in the background as I am hovering over each person in the photo (and each person would be in color as I hover over them.)

I thought I saw a video on this and cannot find it now.



Graeme  Nicholls

Here is how I solved this issue in a couple of my projects:

I have captions appear and disappear as a person hovers their mouse over a button. The caption is set to hidden so when the mouse over occurs it is set to it's normal state. 

Created a caption and set its Initial State to hidden and set the following trigger on the caption.

Set a new trigger on the button

By ticking the restore on mouse leave everything disappears when the mouse moves away.

Hope this helps

Regards Graeme

James Addoms

I know this is an OLD thread :) - but I also realize folks may be finding it (as I did) while searching for tips for animating menus. I wanted to add a "sources" layer on each of my slides to gently fade in and fade out - and to avoid states and complicated triggers so my client can easily update text in the .story file.

My solution:

  • Add a layer called "sources" - (or menu, etc.)
  • Create a "show sources" button on the base layer (or any other layer).
  • Create a "hide sources" button on the "sources" layer.
  • Create a trigger on the "show sources" button to show layer "sources".
  • Create entrance and exit animations for items on your "sources" layer - I chose a .5 second duration for the entrance and exit animations on this project.
  • Set the length of the layer timeline to 1.5 seconds
  • Set the length of the items on the "sources" layer to 1 second.

  • Set the "sources" layer to "Reset to initial state"
  • Create these triggers on the "sources" layer:



Here are the base and source layers, respectively:


The transition is smooth between layers and makes for a nice effect. I've tested in HTML5 in Chrome, IE and Firefox. I hope this helps!