Cross Fade Elements

Cross Fade Actions (uGUI & TMP)

Action Name	Description
Cross Fade Button	Fade a UI Button in/out over duration.
Cross Fade Image	Fade a UI Image in/out over duration.
Cross Fade Panel	Fade a UI Panel in/out over duration.

All Cross Fade Actions are similar for uGUI text and TextMeshPro Text. However, they are different in the fact that they are not interchangable. You cannot use an Action for uGUI to crossfade a TMP element.

To Cross Fade a UI Element, simply add a Button or Image to your Canvas Panel. Leave all settings as they would be when seen (do not hide the button using Alpha).

Next, you must first hide the Button (all buttons if you are creating a Menu), as crossfade only works on the original state of the element. You can do this using a Trigger set to onStart, and hide all of your elements that will be cross faded (see the UI Example for Menu FadeIn).

Then when you are ready to show the Canvas and the Button, use the same Action but with the setting of 1 for the Alpha. This setting can come from a Variable and you can experiment with the fade in time to fit your needs.

The UI Example Menu Fadein provides a compete Menu system using these Actions. Fade in/out Panel should be used when there are multiple elements that should fade at the same time.

See the UI Menu Example in the Asset Package for further information on how to use the Cross Fade Actions.