Animating menu canvas

2D
1

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?

2

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.

3

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.

4

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

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

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

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);
    }
}