UI Toolkit: Tween Engine

Unity 6 UI Toolkit has no built-in tween engine and no `@keyframes` support. You write `element.schedule.Execute(...)` loops, hand-roll easing math, manage cleanup yourself, and watch tweens leak when an element gets removed mid-animation. Designers can't author motion without writing C#.

This asset is the missing animation layer. Animate any UI Toolkit property from a single line of C# — `button.TweenScale(1.2f, 0.25f).SetEasing(EaseType.EaseOutBack)`. Or write declarative `@keyframes` in USS and watch elements auto-animate the moment a class is applied. Same engine drives both paths, so a curve you pick in C# behaves identically to the same curve named in USS.

One-line tweens.

```

element.TweenOpacity(1f, 0.3f).SetEasing(EaseType.EaseOutCubic);

button.TweenScale(1.2f, 0.25f).SetEasing(EaseType.EaseOutBack);

card.TweenTranslate(0f, -20f, 0.4f).SetDelay(0.1f);

await element.FadeIn(0.3f).ToAwaitable();

```

Every property tween returns a `TweenHandle` for chaining (`SetDelay`, `SetLoops`, `From`, `SetRelative`, `OnComplete`, `OnKill`), control (`Play`, `Pause`, `Kill`, `Complete`, `Restart`), and async (`ToAwaitable`). 30+ animatable properties cover the full UI Toolkit style surface: transforms, sizes, positions, spacing, borders, colors, text, layout.

Declarative @keyframes in USS.

```

@keyframes pulse {

0% { scale: 1.0 1.0; }

50% { scale: 1.05 1.05; }

100% { scale: 1.0 1.0; }

}

.heartbeat-card {

animation: pulse 1s ease-in-out infinite;

}

```

Full CSS `@keyframes` syntax — duration, delay, iteration count (including `infinite`), direction (normal, reverse, alternate, alternate-reverse), fill-mode (forwards, backwards, both), play-state, plus the `animation` shorthand. Add a class to an element, the animation starts. Remove the class, it stops. No per-element C# wiring.

32 named easing curves — shared between C# and USS.

```

button.TweenScale(1.2f, 0.5f).SetEasing(EaseType.EaseOutBack); // from code

```

```

.bounce-in { animation: pop 0.4s ease-out-back forwards; } /* same curve, from USS */

```

Linear, sine, quad, cubic, quart, quint, expo, circ, back, elastic, bounce, plus damped spring — all 32 reachable as `EaseType.X` in C# and as kebab-case keywords in USS (`ease-out-back`, `ease-out-bounce`, `ease-in-out-elastic`, `spring`, …). Same math under both names. Plus full CSS `cubic-bezier(x1, y1, x2, y2)` and `steps(n, start|end)` for the cases where the named curves aren't enough.

22 presets — fade, slide, scale, shake, pulse, bounce, heartbeat, jiggle, flash, typewriter, and more.

One call: `card.FadeIn(0.3f)`, `card.SlideInLeft(0.4f)`, `card.ShakeHorizontal(0.5f, 10f)`, `card.Bounce(0.6f)`, `text.TypeWriter(0.05f)`. Every preset returns a `TweenHandle` you can await, chain, or control. The USS side ships a parallel preset library — 13 `.tw-*` classes (`.tw-shimmer`, `.tw-pulse`, `.tw-glow-border`, `.tw-spin`, `.tw-fade-in`, `.tw-slide-in-left/right/top/bottom`, `.tw-bounce-in`, `.tw-shake`, `.tw-color-cycle`, `.tw-skeleton-loading`, `.tw-attention-ring`, `.tw-float`) that drop a polished animation onto any element without writing a `@keyframes` block yourself.

Sequences for composed motion.

```

TweenSequence.Create()

.Append(card.FadeIn(0.3f))

.Append(card.TweenScale(1.05f, 0.2f))

.Join(card.TweenBackgroundColor(highlight, 0.2f))

.OnComplete(() => Debug.Log("done"));

```

Append for chained, Join for parallel, Insert for time-positioned, plus four stagger directions (first-to-last, last-to-first, center-out, edges-in) for collection animations. Await a whole sequence or any subset with `WaitForAll` / `WaitForAny`.

Auto-cleanup on element detach.

Every tween and every keyframe animation silently disposes itself when its target element leaves the panel. Stop your scene, swap panels, destroy a UIDocument — there are no leaked update callbacks, no orphaned coroutines, and you didn't write a single cleanup line. Need explicit control? Hold the returned handle and kill it yourself.

Two demo scenes included.

**TweenDemo** — every property tween with a toggle button, every preset wired up, a 31-curve easing visualizer animating side-by-side, a sequence builder demo (Append, Join, complex sequences), a stagger demo (8 items × 4 directions), text animations (TypeWriter, CountTo, Scramble), a live performance counter, and a Reset All. Under the easing visualizer: a USS-driven `@keyframes` sub-section with four cards (pulse, spin, glow, float) that auto-animate from class assignment alone — the same engine, just from USS. 

**LoadingStatesDemo** — skeleton placeholders, a spinner, and a pulsing progress bar, all driven from `.tw-*` classes.

Plays well with the rest of the UI Toolkit Components suite.

Tween Engine is the animation engine for the entire portfolio. Open `Tools > KrookedLilly > Tween Engine Setup` to enable integrations with any installed sibling asset — UI Toolkit: Screen Manager, Focus & Navigation, Responsive Layout, Modal & Notifications, Theme Switcher, Form Validation, Data Binding, or ECS Bridge. Each integration ships disabled by default; flip the toggle and the sibling asset's runtime starts using Tween Engine immediately.

**With UI Toolkit: Screen Manager:** four `IScreenTransition` implementations powered by Tween Engine — slide, scale, fade, and crossfade — snap into Screen Manager's navigation system the moment you enable the integration. Pick a transition per screen or set a default; the tween runtime handles the rest. Without the toggle on, Screen Manager uses its built-in CSS transitions.

Works on every platform.

Runs under Mono and IL2CPP scripting backends. Uses the standard Unity AOT path that runs on iOS, Android, WebGL, and consoles. Zero-allocation update loop and pooled tween handles keep the GC clean during steady-state animation.

Full C# source, no DLLs.

XML documentation on every public API. Zero external dependencies.