Fade Out an object when hover out the trigger

Jun 11, 2013

Hi

I'm trying tom make a tip box appear when the user puts the mouse over a hotspot.  The way I'm doing this is hiding the layer where the tip box lies and changing his status to normal (visible) when roll over.

This is OK so far.

I apply an animation Fade In and a Fade Out to the tip box so it appears smoothly but only the first one works. The Fade Out cannot be seen because the graphic is hidden again I assume.

What's the correct method for getting this working??

Thanks!!

4 Replies
Crystal Horn

Hey Gerry!  You can always tell us more about what you'd like to see by submitting a feature request here.

For this particular challenge, could you place the object on a layer, set the trigger to show the layer on mouse hover, and add a fading transition to the layer?  Check out this sample - hover over the dandelion.  It works to fade the layer in, but not back out.

Mike Enders

Hey all,

Another way to achieve the animate in and out based up hover is to add the content to the hover state of a transparent object. 

1. Add shape (not a hotspot as they can't have states) and set it to 99% transparent. 
2. Create a hover state for that shape.
3. Create the content you wish to have appear upon hover and add your desired entrance and exit animations.
4. Copy and paste this content onto the hover state of the transparent shape. 

I've attached an SL360 sample but you can view the same concept in this elearning challenge on animated buttons. https://community.articulate.com/articles/inspirational-button-effects-elearning

I hope this helps!

Mike

 

 

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