# Animating menu canvas

**URL:** https://discussions.unity.com/t/animating-menu-canvas/660624
**Category:** 2D
**Tags:** 2D
**Created:** [April 5, 2017, 3:27pm UTC](https://discussions.unity.com/t/animating-menu-canvas/660624 "2017-04-05T15:27:45Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![kabuto178](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@kabuto178](https://discussions.unity.com/u/kabuto178)
#### Post date: [April 5, 2017, 3:27pm UTC](https://discussions.unity.com/t/animating-menu-canvas/660624/1 "2017-04-05T15:27:45Z")

</div>

I am working on a GUI for a menu to create a character and I have set up 2 panels, I would like to have a sort of moving effect when moving on to the next screen, so panel 1 shifts to the left and allows for panel 2 to shift in from the right, how can I achieve this? Should I focus on transforming the position of the panels gameobject?

---

<div class="post-metadata">

### Author: ![Xios](https://avatars.discourse-cdn.com/v4/letter/x/53a042/32.png) [@Xios](https://discussions.unity.com/u/Xios)
#### Post date: [April 5, 2017, 4:26pm UTC](https://discussions.unity.com/t/animating-menu-canvas/660624/2 "2017-04-05T16:26:10Z")

</div>

I think there are 2 ways to do that:

1st and harder - Code it. Just create something like a Menu Manager code and write down some coroutines to switch menu states & positions.

2nd and easier - Just create animations. Select the panel you want to animate in the hierarchy then go Window \> Animation(CTRL + 6), Create. You do 2 animations for panel (enter, out) then switch when clicking buttons or something.

---

<div class="post-metadata">

### Author: ![kabuto178](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@kabuto178](https://discussions.unity.com/u/kabuto178)
#### Post date: [April 5, 2017, 4:31pm UTC](https://discussions.unity.com/t/animating-menu-canvas/660624/3 "2017-04-05T16:31:03Z")

</div>

haha, Xios thanks for the tip cant believe I over looked creating animations. I just thought there was a standard way to manage this kinda of thing out the box. I am still a bit new so grasping more everyday. I will go with animations.

---

<div class="post-metadata">

### Author: ![rakkarage](https://dub1.discourse-cdn.com/unity/user_avatar/discussions.unity.com/rakkarage/32/420546_2.png) [@rakkarage](https://discussions.unity.com/u/rakkarage)
#### Post date: [April 5, 2017, 7:29pm UTC](https://discussions.unity.com/t/animating-menu-canvas/660624/4 "2017-04-05T19:29:21Z")

</div>

you can now set and animate the anchors as well. so an easy way to do it is to ease the anchors from -1, 0 (off) to 0, 1 (on)

![3021437--225720--panel.gif](https://europe1.discourse-cdn.com/unity/original/4X/5/0/1/501d12d0b03755932f93883650997554f751f0af.gif)

add a bounce or spring effect with iTween, LeanTween, DoTween or Ease

> **[Ease by Henry Software](https://henrysoftware.itch.io/ease)**
>
> Unity3D easing functions.

[https://github.com/rakkarage/Ease](https://github.com/rakkarage/Ease)  
or even use the built in animation system if just want linear and less code

```csharp
using System;
using System.Collections;
using UnityEngine;
using ca.HenrySoftware.Rage;
public class Test : MonoBehaviour
{
    private RectTransform _t;
    void Awake()
    {
        _t = transform as RectTransform;
        _t.anchorMin = new Vector2(-1, 0);
        _t.anchorMax = new Vector2(0, 1);
    }
    void Start()
    {
        StartCoroutine(StartAnimation());
    }
    IEnumerator StartAnimation()
    {
        yield return new WaitForSeconds(3f);
        Ease.Go(this, 0, 1, 1, UpdateAnchor, null, EaseType.BounceOut);
    }
    void UpdateAnchor(float t)
    {
        _t.anchorMin = new Vector2(t - 1, 0);
        _t.anchorMax = new Vector2(t, 1);
    }
}

```