No-code: the UI Animator Pro
The UI Animator component lets designers add motion to a UI Toolkit screen from the Inspector: pick the elements, pick when, pick a preset, and preview it without entering Play mode.
Before you start
The screen must be a UI Toolkit UI: a GameObject with a UIDocument component pointing
at a UXML file. Give the elements you want to animate a name or a USS class in UI Builder, for example
hero-card or menu-item.
Add motion in six steps
- Add the component. Select the GameObject with the UIDocument, then Add Component ▸ Cascade ▸ UI Animator.
- Add a rule. Click + in the Rules list. A rule reads as one sentence: these elements, on this trigger, play this.
- Choose the elements. Click the ▾ next to the selector. It lists every element name and
USS class in your UXML, with how many elements each matches. Or type one:
#hero-cardtargets one named element,.menu-itemtargets every element with that class. - Choose when. OnEnable plays once when the screen appears (entrances). Hover, Press and Focus react to the pointer and keyboard.
- Choose what. Pick a preset with ▾, or choose Create New… to make one in place.
- Preview. Click ▶ on the rule. It plays in the Game view and then restores the elements. Adjust the preset and press ▶ again.
Presets
Presets are assets you reuse across screens and projects. Create them from Assets ▸ Create ▸ Cascade.
| Preset | Use it for | Contains |
|---|---|---|
| Transition Preset | entrances and exits | fade, slide from an edge, scale; one duration; an ease or a spring |
| Interaction Preset | hover, press and focus | scale, fade, rotate to an "active" look |
| Sequence Preset | multi-step choreography | steps that run in order, each with actions that run together; every verb, each with its own timing, ease or spring |
A rule's Sequence slot wins over its simple preset. Name presets by intent, such as
Entrance-SlideUp, Hover-Lift or Press-Squish, and keep them in one
folder so the motion style travels with you.
Lists
When a selector matches several elements (such as .menu-item), set stagger
on the rule: the seconds between each element's start. 0.06 gives the classic menu cascade.
Stagger applies to OnEnable rules.
Warnings
The Inspector warns about rules that would do nothing: an empty selector, a missing preset, a preset with no channels enabled, or a hover that only fades to full opacity (elements already rest there). No warnings means the rule will do something visible.
Troubleshooting
- Nothing happens on ▶: the console says the selector matched nothing. Fix the name or class, or pick from the ▾ list.
- Nothing happens in Play mode: the preset changes nothing visible. Enable a channel.
- Hover doesn't react: live pointer input needs Play mode. ▶ previews the motion any time.
- An element is stuck halfway in edit mode: previews restore styles when they finish. If Unity was interrupted mid-preview, reopen the scene; edit-mode styles are never saved.
What still needs code
- Connecting reduced motion to your settings menu: one line.
- Named states and screen swaps.
- Motion triggered by gameplay events. A developer can play any preset from code:
myPreset.Play(element).