Getting started

Install the package, open the demo to see every feature running, then animate your first element.

1. Install

1. Add Cascade Lite (free) or Cascade Pro to your assets on the Unity Asset Store.
2. In Unity, open Window ▸ Package Manager and select My Assets.
3. Find Cascade and install it into your project.

Cascade needs Unity 6000.0 or later and runs on UI Toolkit only.

npx skills add twitchedd/cascade-skill

2. Open the demo

The demo is the fastest way to see what Cascade does. Every section shows an animation next to the code that makes it.

1. In the Package Manager, select Cascade and open the Samples tab.
2. Click Import next to the demo (Demo - Lite Gallery in Lite, Demo - Motion Gallery in Pro).
3. Open the scene in Assets/Samples/ and press Play.

3. Animate an element

Add using Cascade; and call Animate() on any VisualElement. Durations are in seconds.

using Cascade;
using UnityEngine;
using UnityEngine.UIElements;

public class Intro : MonoBehaviour
{
    void OnEnable()
    {
        var root = GetComponent<UIDocument>().rootVisualElement;
        var card = root.Q("card");

        card.Animate()
            .Fade(1f, 0.3f).From(0f).Ease(Ease.OutCubic)
            .Then()
            .MoveY(0f, 0.4f).From(24f).Ease(Ease.OutBack);
    }
}

Verbs in the same step run together. Then() starts the next step after the current one finishes.

From(v) sets where a verb starts. Without it, Cascade starts from the element's current value, so a card that is already visible has nothing to fade.

4. Control it

Animate() returns a handle you can keep:

var pulse = badge.Animate().ScaleTo(1.15f, 0.5f).Ease(Ease.InOutSine).Loop(LoopMode.PingPong, 0); // 0 = forever

pulse.Pause();
pulse.Resume();
pulse.Cancel();          // stops where it is
badge.StopAnimations();  // stops everything on this element

Cancelling leaves the element where it is and does not call OnComplete. An animation that finishes on its own snaps to its target and calls OnComplete. Animations also cancel themselves when the element leaves the panel, so nothing writes to a closed screen.

5. Run code when it ends

row.Animate().Fade(1f, 0.3f).OnSettled(completed => PaintSelection());

Use OnSettled for anything the player must see. It runs whether the animation finished or was cancelled. OnComplete doesn't run when a new animation replaces this one halfway, which happens whenever the player clicks quickly.

Or await it. The result is true when it finished and false when it was cancelled:

async void PlayIntro()
{
    if (!await title.Animate().Fade(1f, 0.4f).From(0f)) return;   // the screen closed: stop
    await subtitle.Animate().MoveY(0f, 0.35f).From(20f).Ease(Ease.OutCubic);
}

What each verb animates

Next

• How to animate a UI Toolkit VisualElement: how this compares with USS transitions and the scheduler.
• Recipes: copy-and-paste patterns for common UI.