> For the complete documentation index, see [llms.txt](https://kdoore.gitbook.io/cs2335/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kdoore.gitbook.io/cs2335/overview-branchlogic/ui-triggered-animations.md).

# UI-Triggered Animations

### Example:  Book of Spells

In this example, we have a BookPanel that allows the user to select buttons in the menu to view different text-sections.  We also want this panel to be hidden. \
The tab-key animates the visibility with a slide-in from the left-side canvas border.  

Step 1:  Create A UI Panel with desired configuration<br>

![UI Panels, Buttons, Text - Vertical Layout  - With Animation](/files/vL6YOt3HpvtqxQM0bMyO) ![Inspector Shows Nested UI-Elements](/files/E7A038k2pW5AQ2QgxPbC)

To create an animated UI element, such as a menu, etc.  You will want all components nested as children within a top-level UI container such as a UI-panel.  Animation scripts will be attached to this top-level panel - the **'BookPanel'** in the example above.

### UI Basic 2 State-Animation: &#x20;

Given a UI Panel such as the one listed above:&#x20;

With the top-level panel selected in the inspector, open the animator window and you are prompted to 'To begin animating BookPanel, create an Animator and an Animation Clip': \
Select the 'Create' button and save as 'BookPanel\_Visible' animation

![Select the Top-Level Panel GameObject when the Animation Window is Visible](/files/ea1m23To6aryW4GC5hGG) ![Prompt for creating new Animation and Animator Component](/files/COVv3ZoGNZtiPUqOVfWC)

Animator Component - Add Bool Parameter using the left side 'Parameters' tab as shown below.

![Animator Component Auto-Generated on BookPanel  - Creating a Bool Parameter](/files/ZjEByOTzZVGsuhYO5d1K) ![Animator on BookPanel](/files/EXuAKx5aRwC5XYrQVozl)

### Configure Animation Properties

Rect Transform - Position - As shown below - When Selecting the 'Add Property' Button, select the Rect-Transform: Anchored Position using the '+' symbol at the right side of the menu

![Add Anchored Position as a Property](/files/wGc06TYME71bVI2bvCFs)

Set the **Anchored Position.x** to have a value that makes the panel visible within the camera viewport. - Remove other Keyframes - only 1 keyframe time-point is required for each animation clip.

![](/files/aFkvZL9Cgnca2BigZ7UW) ![](/files/yvhRD42LKAEufC4Cu5ds)

### **Create: BookPanel\_InVisible** Animation&#x20;

Selecting 'Create New Clip...'

Set the **Anchored Position.x** to have a value that makes the panel **not visible** within the camera viewport. - Remove other Keyframes - only 1 keyframe time-point is required for each animation clip.

![Set the Anchored Position.x to a value outside the Camera View Port](/files/3NGD8PK8L8ZrVVzzfAd7)

Setup Animator Controller - Set BookPanel\_InVisible as 'Layer Default State'

![](/files/FQvesydpn1WrJIVkTdYE)

![Create Transition Arrows Between States](/files/4OPljVE06eHD9gFklDOf)

![Bool Parameter:  IsVisible](/files/F65V3x23nN6MbQRtwJ64)

![Set State Transition - Conditional Logic using Parameter: InVisible](/files/QUTyctLLyrvfumpIJVt2)

### Configure Buttons to Execute MagicSpells Methods

![In the Inspector:  Button: Spell1 - Configure OnClick to Execute MagicSpells.Spell1()](/files/G8jgGDfE9pDj8xqOwzG0)

### Script:  MagicSpells.cs:&#x20;

Change Book-Text with Button onClick:

Add this script to the Top-Level Panel - BookPanel

```
uusing System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class MagicSpells : MonoBehaviour
{
    [SerializeField]
    Text spellText;
    Animator animator;

    bool InVisible = true;

    // Start is called before the first frame update
    void Start()
    {
        animator = GetComponent<Animator>();

        spellText.text = "Magic Spells";
    }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Tab))
        {
            InVisible = !InVisible;
            animator.SetBool("IsVisible", InVisible);
            Debug.Log("Tab Pressed: isVisible= " + InVisible);
            if (!InVisible) { //reset when it becomes visible
                spellText.text = "Magic Spells";
            }
            
        }
    }

    public void Spell1()
    {
        spellText.text = "Spell 1";
    }

    public void Spell2()
    {
        spellText.text = "Spell 2";
    }

    public void Spell3()
    {
        spellText.text = "Spell 3";
    }

    public void Spell4()
    {
        spellText.text = "Spell 4";
    }

    public void Spell5()
    {
        spellText.text = "Spell 5";
    }
}
```