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 > 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.