> 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
Animate UI Panels, Configure UI-Button Action Listeners
### 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
 
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:
Given a UI Panel such as the one listed above:
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
 
Animator Component - Add Bool Parameter using the left side 'Parameters' tab as shown below.
 
### 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
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.
 
### **Create: BookPanel\_InVisible** Animation
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.
Setup Animator Controller - Set BookPanel\_InVisible as 'Layer Default State'
### Configure Buttons to Execute MagicSpells Methods
### Script: MagicSpells.cs:
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();
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";
}
}
```