UI Toolkit: Motion Importer

Animation content authored outside Unity — Lottie JSON from After Effects, sprite sheets from frame-by-frame tools, branded logo animations from your designer — has no native home in UI Toolkit. You drop in a UIDocument and find no way to drag a Lottie file onto a panel. Sprite sheets need a UV-rect helper you write from scratch. Frame-by-frame icon animations live on Animator components that UI Toolkit can't bind to. This asset is the missing import layer. Two custom VisualElements drop straight into UXML: <LottieImage> plays Lottie JSON via a pure-C# managed renderer, and <SpriteAnimation> plays sprite sheets via the standard Unity Sprite Editor workflow with no manual Columns/Rows entry. Zero allocations during steady-state playback. No native plugins required. Lottie playback in three lines. var lottie = new LottieImage { Asset = myLottieAsset, AutoPlay = true, Loop = true }; lottie.OnComplete += () => Debug.Log("loop finished"); parent.Add(lottie); Drag a .lottie.json file into your project and Unity's custom importer turns it into a LottieAnimationAsset with parsed metadata (frame rate, frame count, dimensions, markers). Drop the asset onto a <LottieImage> element and it plays. Full control surface: Play, Pause, Stop, GoToFrame, GoToProgress, Speed, plus events for OnPlay, OnPause, OnStop, OnComplete, OnFrame, and OnMarker. Pure C# renderer — no native plugins. The managed Lottie renderer paints image layers and shape layers (ellipse, fill) with animated transforms (position, anchor, scale, rotation, opacity) directly through UI Toolkit's Painter2D and child VisualElements. Parent-chain transforms cascade correctly so nested layers inherit their parent's scale and rotation. Designed for branded logo animations, icon flourishes, and UI accents — the kind of content most mobile and desktop apps actually use. Sprite sheets the way Unity already works. <motion:SpriteAnimation sheet="Hero" frames-per-second="12" auto-play="true" loop="Loop" /> Slice your sheet in Unity's Sprite Editor (Grid By Cell Count) and drop the resulting Texture2D onto a <SpriteAnimation> element. The asset auto-detects the slice sub-assets via AssetDatabase and plays each Sprite's own rect — no Columns/Rows entry, no double-bookkeeping with what you already told Unity. For un-sliced PNGs, the grid-mode fallback uses Columns/Rows attributes from UXML or inspector overrides. Three loop modes plus sub-range playback. sprite.Loop = LoopMode.PingPong; sprite.PlayRange(8, 15); // play frames 8–15 of a multi-pose sheet sprite.SetFrames(spriteList); // or supply a hand-curated frame list Once / Loop / PingPong for the playback pattern. PlayRange(start, end) for sheets that pack multiple animations on one texture (walk left, walk right, idle, attack — pick any range). Sprite-list mode (SetFrames) when you have pre-curated sprites that aren't in a grid. Frame tags via SetFrameTag fire callbacks at specific frames for game logic. Zero allocations during steady-state playback. SpriteAnimation adjusts UV rect via background-position and background-size — single texture, no per-frame allocation, batch-friendly. A single PlayerLoop hook ticks all live elements; no MonoBehaviour per animation. Stop a panel, swap UIDocuments, destroy a scene — the runtime cleans up automatically. Theme-aware logos via the optional Theme Switcher integration. If you also own UI Toolkit: Theme Switcher, one extension method recolors a Lottie logo to match the active theme: themeManager.BindLottieTint(logo, "--color-brand-primary"); The tint applies to both raster image layers and vector shape fills, and follows live theme switches automatically. The binding cleans itself up when the element leaves its panel. The integration ships disabled by default — open Tools > KrookedLilly > Setup and enable the Theme Switcher → Motion Importer integration. Four demo scenes included. SpriteBasicDemo — drop any sliced sheet onto the controller; the demo plays it with Play / Pause / Stop / Prev Frame