Animate Unity 6 UI Toolkit from C# or from USS — your call. One-liner tweens, declarative `@keyframes`, 32 easing curves, sequences, presets, auto-cleanup. One runtime drives both paths.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.Imperative tween API- `TweenOpacity`, `TweenTranslate`, `TweenScale` (uniform + non-uniform), `TweenRotate`, `TweenWidth`/`TweenHeight`/`TweenMaxWidth`/`TweenMaxHeight`, `TweenLeft`/`TweenTop`/`TweenRight`/`TweenBottom`, `TweenMargin` (uniform + per-side), `TweenPadding` (uniform + per-side), `TweenBorderRadius` (uniform + per-corner), `TweenBorderWidth` (uniform + per-side), `TweenBorderColor` (uniform + per-side), `TweenBackgroundColor`, `TweenColor`, `TweenFontSize`, `TweenFlexGrow`- Every method returns `TweenHandle`; chain `.SetEasing(EaseType)`, `.SetEasing(AnimationCurve)`, `.SetEasing(Func)`, `.SetDelay(seconds)`, `.SetLoops(count, LoopType.Restart|PingPong|Yoyo)`, `.From(value)`, `.SetRelative(true)`, `.SetId(object)`, `.OnStart(...)`, `.OnUpdate(...)`, `.OnComplete(...)`, `.OnKill(...)`, `.Play()`, `.Pause()`, `.Kill(complete: false)`, `.Complete()`, `.Restart()`, `.ToAwaitable(CancellationToken)`- `TweenManager.KillAll(element)`, `TweenManager.KillAll()`, `TweenManager.GlobalSpeed`, `TweenManager.GlobalPaused`, `TweenManager.ActiveTweenCount`Easing- `EaseType` enum — 32 values: `Linear`, in/out/in-out variants for `Sine`, `Quad`, `Cubic`, `Quart`, `Quint`, `Expo`, `Circ`, `Back`, `Elastic`, `Bounce`, plus `Spring`- `EasingFunctions.Evaluate(EaseType, float t)` — direct math access- `CssTimingFunction.FromEaseType(EaseType)` — bridge from `EaseType` to the USS-side timing-function struct- `CssTimingFunction.CubicBezier(x1, y1, x2, y2)` — overshoot-capable (Y unconstrained)- `CssTimingFunction.Steps(count, StepsJumpTerm.End|Start)`- USS keyword surface: CSS spec (`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier(...)`, `steps(...)`) plus kebab-case Penner extensions (`ease-in-sine`, `ease-out-quad`, `ease-in-out-cubic`, `ease-out-back`, `ease-in-bounce`, `ease-out-elastic`, `spring`, …)Sequences- `TweenSequence.Create()` — fluent builder- `Append(handle)` — chain after the current end- `Join(handle)` — start in parallel with the previous append- `Insert(timeOffset, handle)` — explicit time-positioned- `AppendInterval(seconds)` — gap in a chain- `Stagger.From(elements, makeHandle, interval, StaggerMode.FirstToLast|LastToFirst|CenterOut|EdgesIn)`- Awaitable, killable, pausable as one unitPresets- `FadeIn`, `FadeOut`, `FadeSlide`, `ScaleIn`, `ScaleOut`, `ScaleOutBounce`, `SlideOutLeft/Right/Top/Bottom`, `Bounce`, `Pulse`, `Flash`, `Heartbeat`, `Jiggle`, `Shake`, `ShakeVertical`, `Collapse`, `Expand`- Text presets: `TypeWriter`, `CountTo`, `Scramble`- USS preset library: `.tw-shimmer`, `.tw-pulse`, `.tw-glow-border`, `.tw-spin`, `.tw-fade-in`, `.tw-fade-out`, `.tw-slide-in-left/right/top/bottom`, `.tw-bounce-in`, `.tw-shake`, `.tw-color-cycle`, `.tw-skeleton-loading`, `.tw-attention-ring`, `.tw-float`- All preset USS lives in `Presets/keyframe-presets.uss`; load via `` or `Keyframes.RegisterPresets()`@keyframes engine- Full CSS `@keyframes` block syntax + `animation` shorthand parser- 14 animatable USS properties: `opacity`, `translate`, `scale`, `rotate`, `width`/`height`/`min-*`/`max-*`, `margin` (uniform + per-side), `padding` (uniform + per-side), `border-radius` (uniform + per-corner), `border-width` (uniform + per-side), `border-color` (uniform + per-side), `background-color`, `color`, `font-size`, `left`/`top`/`right`/`bottom`, `flex-grow`/`flex-shrink`- `Keyframes.RegisterStyleSheet(text, sourcePath)` / `Keyframes.RegisterStyleSheet(textAsset)` — register `@keyframes` blocks from any USS source- `Keyframes.RegisterPresets()` — register the bundled preset library- `KeyframeAnimator` manipulator — auto-starts / -stops animations as `.tw-*` classes are added or removed- `KeyframeAnimator.ScanDescendants(root)` — attach manipulators to every descendant with a `.tw-*` class in one call- C# escape hatch: `element.PlayAnimation("name", duration, delay, iterationCount, timingFunction, fillMode)`, `PauseAnimation`, `ResumeAnimation`, `StopAnimation`, `StopAllAnimations`, `IsAnimating`- Lifecycle events bubble up the tree: `AnimationStartEvent`, `AnimationEndEvent`, `AnimationCancelEvent`- One runtime: every `@keyframes` animation registers as a `TweenHandle` with `TweenManager`, so the same update loop, easing dispatch, and auto-cleanup pipeline drives both authoring pathsCross-asset integrations- `Tools > KrookedLilly > Tween Engine Setup` is the one-stop panel for enabling integrations with every installed sibling asset. One toggle per integration; integrations ship disabled and the customer flips what they want.- Supported siblings: UI Toolkit: Screen Manager, Focus & Navigation, Responsive Layout, Modal & Notifications, Theme Switcher, Form Validation, Data Binding, ECS Bridge.Editor- Setup panel (`Tools > KrookedLilly > Tween Engine Setup`) — enable/disable Tween Engine integrations with any installed sibling assetIncluded demos- `TweenDemo` — every property tween + every preset + 31-curve easing visualizer + sequences + stagger + text animations + a USS-driven `@keyframes` sub-section- `LoadingStatesDemo` — skeleton, spinner, pulsing progress bar via `.tw-*` classesCompatibility- Unity 6+ (6000.0 and newer)- UI Toolkit (com.unity.modules.uielements)- Mono + IL2CPP (Standalone verified; iOS / Android / WebGL / consoles supported via standard AOT path)- Full C# source, no DLLs- XML documentation on all public APIs- Zero external dependenciesAI (Claude Code) was used as a development assistant throughout the package creation process. This includes code generation, architecture design, writing unit tests, documentation authoring, and debugging. All AI-generated code was reviewed, tested, and validated by the developer. The final package is 100% human-supervised C# source code with no AI runtime components.
