Slide Elements

Slide Actions (uGUI & TMP)

Action Name	Description
Slide In Element	Slide a UI Element in from Top, Bottom, Left, Right, or each Corner.
Slide Out Element	Slide a UI Element out to Top, Bottom, Left, Right, or each Corner.
Hide Element	Hide a UI Element at the Top, Bottom, Left, Right, or each Corner.

All Slide Actions can be used for uGUI text and TextMeshPro Text as they interact with the Rect Transfrom and not the element type.

To Slide a UI Element, simply add a Button, Image or any Element to your Canvas Panel. We will use a Button for this example. However, so we know where the element is suppose to be (its original position), you must add a Local Variable to each element that will slide, and name it "originalPosition".

Set the type to Vector3 and leave the values set to Zero. The Slide Out actions will set these for you. You can also copy and paste this Lacel Variable to all your elements, but make sure it is always named "originalPosition" .

Next, you must first hide the Element (all buttons, Images, Panels, etc., that you wish to slide in). You can do this using a Trigger set to onStart, and hide all of your elements before you fade out your splash screen.

It is suggested that you hide it to the position (Top, Bottom, Left, Right, or Corner) that you want to slide In from. This will provide a seamless animation. Then when you want to slide it in, on start or after another button is clicked, use the Slide In Action as shown below.

When the Element is no longer needed, for example a button is clicked, simplay use the Slide Out Action to animate the element out to the desired location.

The UI Example Menu Slidein provides a compete Menu system using these Actions.

See the UI Menu Example in the Asset Package for further information on how to use the Slide in/out Actions.