---
description: >-
  Animate Inventory:  Steps to add simple Animation to the ISimple_Inventory
  Prefab
---

# Configure Animation

{% embed url="https://youtu.be/oYYo4VGeh6w" %}

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:**](../install-and-configure) 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.&#x20;
* **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:**&#x20;
* 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.
