Repository navigation
Steps
An animation is a list of steps. Each step changes one thing on one object: fades it, moves it, plays a sound, and so on. Pick a Type and the Inspector shows only the fields that type uses.
| Type | What it does |
|---|---|
| Moving and sizing | |
Anchored Position |
Moves a UI element. The usual way to slide something in or out. |
Local Position |
Moves an object by its plain Transform position. Use Anchored Position for UI unless you have a reason not to. |
Rotation |
Turns it. On UI, only use Z, since X and Y tip a flat element over in 3D. |
Scale |
Grows or shrinks it. 1 is normal size. |
Size Delta, Offset Min, Offset Max
|
Resize a UI element in different ways. See Sizing a RectTransform. |
| Punch and shake | |
Punch Anchored Position, Punch Rotation, Punch Scale
|
A quick jolt that springs back. See Punch and Shake. |
Shake Anchored Position, Shake Rotation, Shake Scale
|
A random wobble that settles back. |
| Colour and fading | |
Canvas Group Alpha |
Fades a Canvas Group: a whole panel, children included. |
Graphic Alpha |
Fades one Image, RawImage or text (TextMeshPro included). |
Graphic Color |
Tints one Image, RawImage or text. |
| Shaders | |
Material Float, Material Color
|
Animates a value on the element's shader, e.g. a transition's _Progress. See Material and Shader Properties. |
| Other | |
Set Active |
Turns an object on or off at a moment in the animation. |
Play Sound |
Plays a sound at a moment in the animation. See Sound. |
Custom Property |
Animates a number, colour or text on any script: a score counter, typewriter text, a slider. See Custom Property. |
Set Active and Play Sound are instant: they happen at one moment rather than over time, so they have a Delay but no Duration or Ease.
The moving and sizing steps (apart from Rotation) can also travel along a curve instead of a straight line. See Movement Paths.
Every step has three timing fields:
-
Start: click the button to switch it.
-
AFTER PREVIOUS: waits for everything above it to finish, then starts. -
WITH PREVIOUS: starts at the same time as the step above it.
-
- Duration: how long the step takes, in seconds.
- Delay: extra wait before this step starts. Works with both Start options.
So the list reads top to bottom like a timeline:
AFTER Fade in the panel 0.25s
WITH Grow the panel 0.25s ← same time as the fade
AFTER Slide in the title 0.3s ← once both are done
WITH Fade in the title 0.3s ← same time as the slide
WITH Fade in the button 0.3s delay 0.1 ← a moment after the title
A step marked WITH PREVIOUS joins the group above it. Stagger items in a group with small delays (0, 0.05, 0.1…) for a cascade.
Collapsed, each step reads like a line of a timeline:
AFTER Logo (Scale) 0.25s Out Back
That's: when it starts, the object it drives, the property in brackets, the duration, and the ease.
-
[self]means the player's own object. - A long Target Path is shortened from the front (
…/HoverHighlight), since the end of a path names the object. Hover a shortened header for the full text. - A ⚠ at the end means the step won't do anything as it stands. Open it for the reason. See Warnings and Common Issues.
Once a list has one step, + copies the last step instead of adding a blank one, which is usually what you want. To put a step in the middle of a list, right-click a step's header and use Paste Step Above / Below. See Copy and Paste.
Below the steps, each animation has a few settings of its own:
| Setting | What it does |
|---|---|
| Loops | How many times the whole animation plays. 1 = once (normal), 2 = twice, -1 = forever until stopped. |
| Loop Type | Only matters when Loops isn't 1. Restart jumps back to the start each time. Yoyo plays forwards, then backwards, then forwards. Incremental repeats the same change again and again, so a move of +50 keeps going: 50, 100, 150. |
| Play At Custom FPS | A stop-motion look. See Stylised Motion. |
| Snapping | Pixel-perfect movement. See Stylised Motion. |
| Apply From Values Immediately | See From and To. Leave it on. |
| Interrupt Others | Whether playing this stops the player's other animations, and how. See Interrupting and Chaining. |
| On Complete | Runs when the animation finishes on its own. Not when it's interrupted or stopped. |
| Notes | A text box for yourself: what this animates, what plays it, why that odd delay is there. Nothing reads it. |
At the top of the UI Animation Player itself:
| Setting | What it does |
|---|---|
| Use Unscaled Time | On by default. Keeps UI animating while the game is paused (Time.timeScale = 0). Leave it on for pause menus. |
| Kill On Disable | On by default. Turning the object off stops its animations, and their On Complete doesn't fire. |
| Shared Anim. Asset | Optional. A shared library of animations. See Animation Sets. |
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