Your First Animation - rmfandyplayz/UnityUIAnimationTools GitHub Wiki

We'll make a panel that fades in while popping up to full size, play it from a button, then make the matching Hide in one click.

1. Lay the panel out as it should look when shown

Put the panel exactly where it should end up, at its normal size and fully visible. The tool calls this the resting state, and animations can land on it without you typing any numbers (that's what Baseline is for, below).

Add a Canvas Group component to the panel. That's what lets it fade as a whole, children included.

2. Add the player

Add Component → UI Animation Player on the panel.

3. Add an animation

Click + on Animations, open the new entry, and set Name to Show. That's the name you'll play it by.

4. Step one: fade in

Click + on Steps and set:

Field	Set to	Why
Type	`Canvas Group Alpha`	Fades a Canvas Group
Canvas Group	leave empty	Empty means "the object this player is on"
Duration	`0.25`	A quarter of a second
Ease	`Out Quad`	Starts fast, slows into place
the TO button	click it so it reads FROM	Gives the step a starting value
FROM	`Absolute` `0`	Start invisible
To	`Absolute` `1`	End fully visible

5. Step two: pop up, at the same time

Click + on Steps again. It copies the step above, so change:

Field	Set to	Why
Start	click so it reads WITH PREVIOUS	Runs alongside the fade instead of after it
Type	`Scale`	Changes size
Ease	`Out Back`	Overshoots a little, then settles
FROM	`Absolute` `0.8, 0.8, 0.8`	Start at 80% size
To	`Baseline` `0, 0, 0`	End at the resting size, plus nothing

To: Baseline 0 means "land exactly on the resting state". If you later make the panel bigger in the scene, the animation follows automatically. More on this in From and To.

6. Preview it

Under the animation are Play and Reset buttons. They work without entering play mode: press Play and watch the panel in the Scene or Game view. Stop and Restore puts everything back as it was. See Previewing.

7. Play it from a button

On any Button, add an entry to On Click, drag in the panel, and pick UIAnimationPlayer → PlayAnimation (string). Type Show into the box.

That's the whole thing, with no code. (If you do want code, it's anim.Play("Show");. See Code API.)

8. Make the Hide

Right-click the Show header → Duplicate as Mirrored. You get a Show Mirrored underneath with everything reversed: it fades out and shrinks to 80%. Rename it to Hide. It's an ordinary animation, so tweak it however you like. See Mirroring.

What you've built

The step headers read like a timeline when collapsed:

▼ Show
    AFTER  [self] (Canvas Group Alpha)  0.25s  Out Quad
    WITH   [self] (Scale)               0.25s  Out Back

That's: when it starts, what it drives ([self] = the player's own object), the property, how long, and the ease. If a header ever ends in ⚠, the step won't do anything as it stands. The warning under it says why (see Warnings and Common Issues).

The full Inspector for this example

UI Animation Player
  Use Unscaled Time                ✔
  Kill On Disable                  ✔
  Animations                       1
    ▼ Show
        Name                       Show
        ▼ Steps                    2
            ▼ AFTER  [self] (Canvas Group Alpha)  0.25s  Out Quad
                Start              [AFTER PREVIOUS]
                Type               Canvas Group Alpha
                Canvas Group       None            ← empty = this GameObject
                Duration           0.25
                Delay              0
                Ease               Out Quad
                FROM   [Absolute]  0
                To     [Absolute]  1

            ▼ WITH  [self] (Scale)  0.25s  Out Back
                Start              [WITH PREVIOUS]   ← parallel with the fade above
                Type               Scale
                Rect Transform     None
                Duration           0.25
                Delay              0
                Ease               Out Back
                FROM   [Absolute]  X 0.8  Y 0.8  Z 0.8
                To     [Baseline]  X 0    Y 0    Z 0    ← lands on the authored scale
        Loops                      1
        Loop Type                  Restart
        Play At Custom FPS         ☐
        Snapping                   [DISABLED]
        Apply From Values Immediately  ✔
        Interrupt Others           ✔  [COMPLETE] [REPORT]
        On Complete                (UnityEvent)

And the same thing driven from a script:

private void Awake()    => anim.ApplyFromState("Show");   // start hidden
private void OnEnable() => anim.Play("Show");
public  void Close()    => anim.Play("Hide", () => gameObject.SetActive(false));

Next: Steps, for everything a step can do.