# 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
 
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";
}
}
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://kdoore.gitbook.io/cs2335/overview-branchlogic/ui-triggered-animations.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.