How to animate a UI Toolkit VisualElement

Unity UI Toolkit has three built-in ways to animate a VisualElement at runtime: USS transitions, the panel scheduler, and the experimental animation API. They cover simple cases. For sequences, lists and interruptible motion, most projects end up writing their own tween layer or using a library.

This page shows each option with working code and when to use it.

Approach	Good for	Limits
USS transitions	hover and state changes styled in USS	no sequencing, no completion callback beyond an event, needs a frame before it runs on a new element
Panel scheduler	one custom effect	you write easing, timing, cancelling and cleanup yourself
`experimental.animation`	quick one-off tweens	experimental API that can change between Unity versions; durations in milliseconds
A tween library (Cascade)	sequences, lists, springs, transitions	a package to add

1. USS transitions

Declare which properties animate in USS, then change the element's class from C#. UI Toolkit animates between the two styles.

.panel {
    opacity: 0;
    translate: 0 24px;
    transition-property: opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: ease-out-cubic;
}
.panel--open {
    opacity: 1;
    translate: 0 0;
}

panel.EnableInClassList("panel--open", true);

This is the right tool for hover states and simple toggles, because the styling lives in USS with the rest of your look.

Things to know:

A class added in the same frame the element is created doesn't animate: the element has no previous style to animate from yet. Wait a frame, for example with panel.schedule.Execute(() => panel.AddToClassList("panel--open")).
There's no built-in way to run step B after step A, or to start ten list items one after another.
To react when it ends, register for TransitionEndEvent. It fires once per property; an interrupted transition sends TransitionCancelEvent instead.

2. The panel scheduler

Every element has a scheduler that runs code on the panel's update. You can drive any style value from it:

void FadeIn(VisualElement el, float duration)
{
    float start = Time.unscaledTime;
    IVisualElementScheduledItem item = null;
    item = el.schedule.Execute(() =>
    {
        if (el.panel == null) { item.Pause(); return; }   // the element left the screen
        float t = Mathf.Clamp01((Time.unscaledTime - start) / duration);
        float eased = 1f - Mathf.Pow(1f - t, 3f);          // ease-out cubic
        el.style.opacity = eased;
        if (t >= 1f) item.Pause();
    }).Every(0);
}

This gives you full control, and it's what most hand-written UI Toolkit tweening looks like. The cost is that every effect repeats the same work: easing, the start value, stopping a previous animation on the same element, and stopping when the element is removed. Most projects end up wrapping it in a small tween helper, which grows into a library over time.

3. The experimental animation API

UI Toolkit includes a small tween API under element.experimental.animation:

using UnityEngine.UIElements.Experimental;

el.experimental.animation
  .Start(new StyleValues { opacity = 0f }, new StyleValues { opacity = 1f }, 300)   // milliseconds
  .Ease(Easing.OutCubic);

It works for one-off tweens. It sits in the Experimental namespace, so it can change between Unity versions, and it has no sequencing, staggering or springs.

4. A tween library: Cascade

Cascade is a runtime animation library built for UI Toolkit. The same fade-and-rise as above is one call, and it handles the parts the scheduler version leaves to you: easing, start values, replacing an animation that's already running, and cancelling when the element leaves the panel.

using Cascade;

panel.Animate()
     .Fade(1f, 0.3f).From(0f).Ease(Ease.OutCubic)
     .MoveY(0f, 0.3f).From(24f).Ease(Ease.OutCubic);

Sequences chain with Then(), and every animation can be awaited:

await title.Animate().Fade(1f, 0.4f).From(0f);
await button.Animate().ScaleTo(1f, 0.3f).From(0.8f).Ease(Ease.OutBack);

Cascade Lite is free and MIT licensed, and covers everything on this page. Springs, staggered lists and screen transitions are in Pro.

Get Cascade Lite (free) Getting started

Which one should you use?

A hover color or a toggle styled in USS: USS transitions.
One unusual effect, such as a custom shader value: the scheduler, or Cascade's Value verb.
Panels that slide in, then something else happens: a tween library, so the steps run in order and stop cleanly.
Lists, interruptible buttons, screen changes: a library with stagger, springs and transitions.

Animate translate, scale, rotate and opacity where you can. They don't trigger layout. Animating width, height, top or left re-runs layout every frame, which is fine for one accordion but slow for many elements.