Repository navigation
Your First Animation
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.
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.
Add Component → UI Animation Player on the panel.
Click + on Animations, open the new entry, and set Name to Show. That's the name you'll play it by.
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 |
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.
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.
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.)
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.
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.
Installation
Code API
Basic usage
Advanced usage
- Punch and Shake
- Sizing a RectTransform
- Movement Paths
- Sound
- Custom Property
- Material and Shader Properties
- Stylised Motion
- Interrupting and Chaining
- Mirroring
- Copy and Paste
- Animation Sets
- Scene Gizmos
Nitty-gritties
Warnings and Troubleshooting