> 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/master_v2/inventory-system/inventory-scriptableobject/customization-steps/ui-animation.md). # Configure Animation Animate Inventory: Steps to add simple Animation to the ISimple\_Inventory Prefab {% embed url="" %} The video above shows how to add Animation to the ISimple\_Inventory Prefab The **InventoryDisplay.cs script already contains animation logic** so the InventoryDisplay prefab: ISimple\_Inventory is 'off-screen' when a scene starts, but when the Tab key is pressed, then the prefab moves to it's 'on-screen' position. * [**InventoryDisplay: download, add to Scene, configure:**](/cs2335/master_v2/inventory-system/inventory-scriptableobject/install-and-configure.md) Once you have the ISimple\_Inventory added to the Canvas in a scene, and you've added the InventoryDisplay.cs script to the prefab, and hit 'apply' to update the prefab, then follow the Animation steps below. * **Remember to set the Rect-Transform Anchors** once the Prefabs have been added to the Scene **Animation Steps:** * **Step 1: Add Animator Component** to the ISimple\_Inventory prefab.: The script InventoryDisplay.cs script has animation logic included, so the script does not need to be modified. ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M04eWSVrF1dPNoG3KOs%2F-M04eYHguzAZZ8bmT8fS%2FScreen%20Shot%202019-04-17%20at%201.52.58%20PM.png?generation=1581716768847833\&alt=media) * **Step 2: Open Animation Window:** Menu > Window > Animation (anchor the Animation tab as you desire. In these images, it has been anchored to the bottom panel) * **Step 3: Create new Animation Clip** With the ISimple\_Inventory gameObject selected in the Hierarchy, in the Animation window, select the button in the middle pane to create an animation clip for this gameObject. ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M04eWSVrF1dPNoG3KOs%2F-M04eYHidMBn9TfeStDg%2FScreen%20Shot%202019-04-17%20at%202.03.55%20PM.png?generation=1581716769330840\&alt=media) **Create First:** 1 of 2 AnimationClips.\ 1\. **HideInventory Animation:** Position Inventory Panel in it's off-screen position. ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M04eWSVrF1dPNoG3KOs%2F-M04eYHkJZb5_vtJrRmS%2FScreen%20Shot%202019-04-17%20at%202.04.54%20PM.png?generation=1581716770117210\&alt=media) * **Step 4: Add Property - Anchored Position** In the lower-left panel for the Animation window, select the Add Property Button, select the AnchoredPosition by selecting the gray-plus sign to the right of that option, see image below: ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M04eWSVrF1dPNoG3KOs%2F-M04eYHm-O_6m34O2GF-%2FScreen%20Shot%202019-04-17%20at%202.09.28%20PM.png?generation=1581716768165308\&alt=media) * **Step 5: Remove Property: Anchored Position.y** Select the Anchored Position.y and right-click to select Remove Property, this will insure that only the horizontal position will be animated. ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M04eWSVrF1dPNoG3KOs%2F-M04eYHo38XO_kPb-p_Q%2FScreen%20Shot%202019-04-18%20at%207.03.10%20AM.png?generation=1581716769933873\&alt=media) * **Step 6: Remove Keyframes at time: 1.00** The image below shows that right-clicking on the blue highlighted keyframes at time: 1.00, gives the pop-up window option to delete the final keyframes for this animation. This insures that only the initial position of the InventoryDisplay is used for each animation clip. ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M04eWSVrF1dPNoG3KOs%2F-M04eYHqEVw7QI7nDs-l%2FScreen%20Shot%202019-04-18%20at%207.06.35%20AM.png?generation=1581716768290565\&alt=media) * **Step 7: Repeat steps 3-6** to create **ShowInventory Animation Clip** For the ShowInventory Animation Clip, move the InventoryDisplay prefab to it's on-screen postion.x to set the keyframes at 0.0; * **Step 8: Configure Animator Controller.** Open the Animator Window. After both animation clips have been created, the Animator Component now shows an Animator controller has been created: ISimple\_Inventory, and set in the Animator Component. See Image below. The image below shows that InventoryHide should be the 'Animator Controller's Default State',it should be orange, with a connecting arrow from the Entry state. If this is not the case, right click on the InventoryHide state and select: **Set as Layer Default State**. From each State node, right click to create a transition arrow to the other state. ![](https://2944698967-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgOacVpbicrqehO%2F-M04eWSVrF1dPNoG3KOs%2F-M04eYHsF1ptXYVqDCyH%2FScreen%20Shot%202019-04-19%20at%207.11.36%20AM.png?generation=1581716768229289\&alt=media) * **Step 9: Create Parameter: Bool: IsVisible** In the left panel of the Animator Controller, create a Parameter: Bool 'IsVisible'. Then select each transition arrow and configure the following logic in the right side panel: Un-check: HasExitTime InventoryHide -> InventoryShow if IsVisible is true InventoryShow -> InventoryHide if IsVisible is false * **Step 10: Test: Play the Scene, Press the 'Tab'** key to switch between showing / hiding the InventoryDisplay Prefab. **Troubleshooting:** * Make sure that the Parameter: **IsVisible** is spelled correctly, it must match spelling / capitalization used within the InventoryDisplay.cs script. * Make sure the **InventoryDisplay.cs** script has been added as a component to the ISimple\_Inventory Prefab.