Documentation & Tutorials
  • Pivec Labs Documentation & Tutorials
  • Assets for Game Creator 1
    • Action Pack 1
      • Action List
        • Misc Actions
        • Object Actions
        • TMP Actions
      • Examples
        • Example 1 TMP
        • Example 2 Objects
        • Example 3 Actions
    • Action Pack 2
      • Action List
        • Camera Actions
        • Graphics Actions
        • Audio Actions
        • Video Actions
      • Triggers
      • Components
      • Examples
        • Example 1 - Camera
        • Example 2 - Camera FPS
        • Example 3 - Graphics
        • Example 4 - Sounds
        • Example 5 - Audio Player
        • Example 6 - Video Player
    • Action Pack 3
      • Action List
        • Day/Night Cycle
        • Light Control
      • Components
      • Examples
        • Example 1 - Day Night Cycle
        • Example 2 - Light Control
    • Accessibility Module
      • Components
      • Setup
      • Auditory Aids
        • Closed Captions for Sounds
        • Volume Control with Tags
        • Multiple Volume Controls
      • Motoric Aids
        • Configurable Tank Camera
        • On-Screen Multi-Function Joystick
        • Dynamic Touchstick
        • Multi-Function Touchstick
      • Cognitive Aids
        • Parental Controls with Password
        • Dyslexia Font Options
        • Motion Sickness Prevention
        • Gameplay Speed and Sensitivity
      • Visual Aids
        • Colour Picker
        • Variable Text Size
        • Object Outlining
        • Colour Switching
        • Colour Correction
    • Mobile Components
      • Actions
        • Haptics
        • Camera
        • TouchSticks
        • Gyroscope
        • Utilities
      • Triggers
        • Touch Gestures
      • Conditions
      • Components
      • Prefabs
      • Examples
        • Example 1 Haptics
        • Example 2 Cameras
        • Example 3 Gestures
        • Example 4 Controls
        • Example 5 Steering Wheel/Pedals
        • Example 6 Gyroscope Controls
        • Example 7 Gyroscope Camera
        • Example 8 Utilities
        • Example 9 AutoRun
      • Extras
    • UI Components
      • Canvas Components
        • Canvas Animations
        • 3D Models on a Canvas
        • Video on a Canvas
      • Animating UI Elements
        • Cross Fade Elements
        • Slide Elements
        • Shake UI Element
        • Tooltips
      • Text Mesh Pro & uGUI Text
      • Colour Picker Component
      • Mini Map Component
        • MiniMap QuickStart
        • Fullscreen Map
        • Adding Markers
        • Adding Labels
      • System Info Panel
        • SysInfo Quickstart
        • Using SysInfo Toggle
      • Main Menu Templates
        • Customising the Prefabs
        • Load/Save System
        • Comic Strip Example
    • Developer Tools
      • Time Manager
        • Actions & Conditions
      • Waypoint System
      • Click to Spawn Objects
      • In-Game Console
      • In-Game Screen Capture
    • Turn Based Module
    • VR Module GC1
  • Assets for Unity
    • Developer Tools for Unity
      • Click to Spawn
      • In-Game Screen Capture
      • In-Game Console
    • Mini Map System
      • MiniMap Quickstart
      • Map Parameters
      • Adding Makers
  • Tutorials
    • Tutorials for Game Creator 1
      • Installing and Updating Modules
      • Adding Actions to the Button Bar
      • Changing the Graphics for TouchStick
      • Adding Passwords to Player Actions
      • Using the Colour Picker with Variables
      • Creating a 3D Inspection Panel for Game Objects
      • Customising the UI MiniMap
      • Creating a toggle for the SysInfo Panel
      • Simple Player Run on Left Shift Down
      • Pan Follow Camera with Keyboard
    • Tutorials for Unity
  • ANNEX
    • Roadmap
    • FAQ
Powered by GitBook
On this page

Was this helpful?

  1. Assets for Game Creator 1
  2. UI Components
  3. Animating UI Elements

Slide Elements

PreviousCross Fade ElementsNextShake UI Element

Last updated 5 years ago

Was this helpful?

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.