#Animations

Window animations are USS transitions. They are in Assets/UIToolbox/Runtime/Resources/UIToolbox/Styles/WindowAnimations.uss.

The AnimationsDemo example scene shows each kind of animation on this page, with its code: presets, custom presets, AnimateBinding, your own transitions and restyled window animations.

There are two kinds of classes:

• A transition class holds only transition-* properties. It is on the chrome while the animation plays.
• A state class holds the animated values.

Maximize, restore and minimize animate bounds that C# writes (left, top, width, height).

If Workspace.AnimationsEnabled is false (animations-enabled="false"), no transition plays. The changes apply at once.

#Restyle a built-in animation

Put the override in a user sheet or a theme. Two ways:

1. Change the --tb-animation-* variables. This changes all animations.
2. Override the classes. This changes one animation.

Example: windows slide up when they open.

.tb-window--closed {
    opacity: 0;
    scale: 1 1;
    translate: 0 24px;
}

.tb-window--anim-open,
.tb-window--anim-close {
    transition-property: opacity, translate;
}

To turn off one animation, set its duration to zero:

.tb-window--anim-minimize {
    transition-duration: 0s;
}

#Add an animation

Use WindowAnimations.PlayAsync or WindowAnimations.EnterAsync on your own elements.

Both methods:

1. Add transitionClass to the element.
2. Run change (for example, add or remove a state class).
3. Complete when the transitions that the change started end or are cancelled. A fallback timer (longest duration plus delay plus 100 ms) completes the task if no end event arrives.
4. Remove transitionClass.

The task completes at once, and the change still applies, if the element is not in a panel, the token is already cancelled, or transitionClass is empty.

USS:

.my-panel--hidden {
    opacity: 0;
    translate: 0 -12px;
}

.my-panel--anim-show {
    transition-property: opacity, translate;
    transition-duration: var(--tb-animation-duration-normal);
    transition-timing-function: var(--tb-animation-easing-entrance);
}

C#:

using System.Threading.Tasks;
using UIToolbox.Animation;
using UnityEngine.UIElements;

public static class PanelAnimations
{
    public static Task ShowAsync(VisualElement panel)
    {
        panel.AddToClassList("my-panel--hidden");
        return WindowAnimations.EnterAsync(panel, "my-panel--anim-show",
            () => panel.RemoveFromClassList("my-panel--hidden"));
    }
}

#Animation presets

A preset is a named animation for any element. Play it from C# or from UXML, with no transition code.

await WindowAnimations.PlayPresetAsync(goldLabel, "flash");
_ = WindowAnimations.PlayPresetAsync(healthBar, "pulse", loop: true);   // until StopPreset
await WindowAnimations.PlayPresetAsync(panel, "fade-out", keep: true);  // stays hidden until StopPreset
WindowAnimations.StopPreset(healthBar, "pulse");

<ui:Label>
  <Bindings>
    <ui:DataBinding property="text" data-source-path="Gold" binding-mode="ToTarget" />
    <tb:AnimateBinding property="anim-gold" preset="flash" path="Gold" />
  </Bindings>
</ui:Label>

AnimateBinding watches the value at path, from the data source of the element. property is only a unique id, because the binding writes nothing. trigger sets when the preset plays:

Built-in presets (WindowAnimations.PRESETS):

A preset is USS only. To add one, write these classes in any sheet. PlayPresetAsync adds and removes them:

At the end the element transitions back to its own look. Example: a glow that grows in two steps.

.tb-anim-glow {
    --tb-anim-steps: 2;
    transition-property: border-color, scale;
    transition-duration: 120ms;
}

.tb-anim-glow--1 { border-color: #ffd54a; scale: 1.1 1.1; }
.tb-anim-glow--2 { border-color: #fff3b0; scale: 1.2 1.2; }

Rules:

• A new play of the same preset on an element stops the old one. Different presets can play at the same time, if they animate different properties.
• The play ends at the end, on StopPreset, when the token is cancelled, or when the element leaves its panel. Nothing plays when the element is not in a panel or when AnimationsEnabled is false.
• The preset classes load on the panel root. A rule of the element with the same specificity in a sheet nearer the element wins. If an element rule sets the same property, such as opacity, make the preset selector more specific, for example .my-card.tb-anim-glow--1.
• A step waits for the longest transition-duration plus transition-delay, not for the end events.

#Per-step timing

A step rule can set its own transition-duration, transition-delay and transition-timing-function. They apply to the transition into that step. The step rule must come after the base rule, because at equal specificity the later rule wins. The return to the element's own look uses the timing of the base rule.

.tb-anim-coin { --tb-anim-steps: 2; transition-property: translate; transition-duration: 220ms; }
.tb-anim-coin--1 { translate: 0 -8px; transition-duration: 70ms; }
.tb-anim-coin--2 { translate: 0 0; transition-duration: 260ms; transition-timing-function: ease-out-bounce; }

#Animation Editor

Tools > UI Toolbox > Animation Editor edits presets with a live preview, in edit mode.

• The list shows each preset in the USS files of the project, with its file.
• The preview plays the preset on a sample element (label, button, card, meter or window). Play, Loop, Step (one step at a time) and Stop.
• The editor sets the name, the base timing, the steps with their properties and their own timing, and a scope selector. A curve shows the easing. "One play" shows the total time.
• A property row has a helper for its type: a slider for opacity, two fields for scale and translate, a degree field for rotate and a color field for colors. Any other USS property takes text.
• Save writes the preset to the sheet in "Save To". The "Generated USS" foldout shows the text.

The editor writes a preset between two markers. It replaces only that block on the next save:

/* tb-anim-editor: begin coin */
...
/* tb-anim-editor: end coin */

The editor opens a preset outside the markers read-only, for example the built-in presets and presets written by hand. Duplicate makes an editable copy. The editor does not save to WindowAnimations.uss.

The scope is the selector text before the preset classes, for example .kingdom .tb-toolbar Label. It makes the step rules more specific than the element rules. The base class .tb-anim-{name} is not scoped.

The preset attribute of AnimateBinding has a picker in the Inspector and in UI Builder. It lists the known presets and warns about a name that no sheet defines. Put [PresetName] on your own string field or property to get the same picker.