UI panel slide

Unity Engine
1

Hello

I have a empty GO which I named PanelMaster. This GO I child of a canvass

I made a couple of panels as child to the PanelMaster.
Right now I use these panels as pause menu.
I use setActive to enable/disable the panels. but I want a smooth slide in if next panel . How do I achieve this??
I have DOTween the pro package.

2

There are a few ways.

Simplest is put an SlideAnimation script (custom-made) on each panel using an OnEnable function, but then it can’t smooth slide out, only in.

Another way is to have a Panel script with a Show/Hide function. And call panel.Show() instead of doing panel.SetActive. Put the DOTween code in those functions.

Also, I prefer to add a CanvasGroup to panels, and set alpha to 0, and blocksRaycasts false, instead of deactivating.

So your show code can look like:

public class Panel : MonoBehaviour
{
    public CanvasGroup canvasGroup;

    public void Show()
    {
        canvasGroup.alpha = 1f;
        canvasGroup.blocksRaycasts = true;
        DOTween(from, to...);
    }

    public void Hide()
    {
        canvasGroup.alpha = 0f;
        canvasGroup.blocksRaycasts = false;
        DOTween(from, to...);
    }
}
1 Like
3

Use DOTween to move the parts you want!

There’s really no better way to put it.

Pro Tip: make blank empty GameObjects and anchor them in your UI hierarchy to indicate the two positions you want for this sliding thing, then use the positions of those objects to configure the tween.

2 Likes
4

Replying to my own message: I hadn’t used Dotween so I went and took a look. I went purely from docs found from the readme file that came with the package, which linked to the website and some great example code.

See enclosed package for an example of using invisible GameObjects to move stuff around with DOTWeen. It’s literally this simple:

transform.DOMove( target.position, Duration);

7907458–1007959–DotweenUIPositioner.unitypackage (5.14 KB)

1 Like
5

Didn’t use your package but I followed your suggestion and it seems to work fine ! Hadn’t found a better solution yet so if anyone has a tip otherwise this one will do :slight_smile: