Creating an effect where an element goes from invisible to visible when a symbol is rolled over

please help! I am new to hype and a complete noob but used to use flash a bit a while ago, I simply want to be able to rollover a symbol to make another symbol fade in, and fade out again when rolled off. Similarly, to make a symbol play a longer timeline, but stop again and go back to invisible when rolled off. I have managed to use the actions ‘on mouse over’ to make a symbol play the timeline of another symbol but I can’t seem to get the symbol to be invisible to start with, or when i have managed to get it invisible to start with I can’t manage to get it to go back to invisible when ‘on mouse out’ I know what I want to do is simple I just can’t quite get my head around it :frowning: I can try to explain more clearly if that doesn’t make sense.

Hi Katie @ktrilby

What you want to do is to animate the opacity for whatever element you want.

You can do this by opening the properties dropdown in the “timeline” window.

and choosing opacity. You can then animate the opacity of that element.

Another way is to record the change by pressing the record and then move the opacity



*edit sometimes it’s better to give an example :wink: (17.4 KB)

thanks DBear I appreciate your fast response! I have managed to animate the opacity, from 0%- 100% over 1 second on the timeline inside the symbol, its just I’m getting stuck when i go back to the main timeline and symbol is there at 100% opacity to start with but I don’t want the symbol to appear at all until i rollover its corresponding symbol. i hope that makes sense…

In your Main Timeline set the opacity to 0%. So it won’t show up at the start. :wink:

look at my example if you need.


Thanks, I’m still getting stuck and feeling stupid… if i set the opacity in the main timeline to 0% it won’t show up at all on mouseover and if i leave it it plays the timeline on mouseover and fades in but it is already there to start with… :confused: what am i missing? (164.4 KB)

Hi Katie,

Don’t feel stupid :slight_smile: we’ve all been there. Here is an edited copy.

Just an FYI. When you want to create timelines and alter elements within your project. Make sure you set the beginning state of your elements in your Main Timeline first and then create a new timeline and then change the properties. That way your new timelines already have the start position you need.

Also, on mouse out I ticked this box. That way your element disappears when you “Mouse Out”. :smile: (181.6 KB)

here is my different approach.
opacity-help(byJamesKoh) (162.8 KB)

Thanks James

Same bird, two stones!


i couldn’t think of checking play in reverse. i guess your way is smoother.

thank you so much! i had not checked the play in reverse box >_< working perfectly now, really appreciate your help!

:wink: it’s all good. Always good to have different approaches. Your way might be smoother depending on what needs to be done next :smile:

1 Like