Xocoatl¶
Keyframe-based UI animation for Roblox, plus a UI Designer for laying out ScreenGuis in Studio. Design animations in the plugin, play them in your game with a one-line API call.
Early access
Xocoatl is in early access: features and file formats may still change. UI Designer is a public beta — there will be bugs. If you find any, please tell me on the Developer Forum plugin thread or Discord. The plugin version (toolbar / status card) and runtime version (in your place) are separate — keep them in sync; see Install Runtime. The docs header shows the latest plugin identity as v0.2.0 - B35 - P10 (semver · B patch build · P version code).
Get Started Runtime API Discord community
What you can do¶
Lay out UI in Studio — Open UI Designer (beta) to browse ScreenGuis, draw on a device-sized artboard, and edit fill, stroke, layout, and text on the real instances. There will be bugs — please report them. See UI Designer — Overview.
Animate any UI property — Position, Size, Color, Transparency, Rotation, and dozens more. Per-keyframe easing. Full undo/redo. Live preview in Studio.
Play animations in your game — Install the runtime once, then control everything from a LocalScript:
local Anim = require(
game.Players.LocalPlayer.PlayerScripts.Xocoatl.UIAnimController
)
-- Play once
Anim.play("ShopOpen")
-- Play reversed (use one clip for both open and close)
Anim.play("ShopOpen", { reverse = true })
-- Loop
Anim.play("IdleFloat", { loop = true })
-- Play on a specific instance (template animations, cloned UI)
Anim.playOn(myFrame, "CardReveal")
-- Wire hover in/out automatically
Anim.bindHover(myButton, "ButtonHover")
Key features¶
Delta mode — Animate relative to where the element starts, not to a fixed position. One clip works on any element regardless of its starting state. See Delta Mode.
Template animations — Create a clip not tied to one specific element. Apply it to any compatible UI at runtime using Anim.playOn(inst, "ClipName"). Perfect for repeated UI like inventory slots or buttons. See Template Animations.
Hover animations — Wire MouseEnter and MouseLeave to a single animation with one call. Anim.bindHover(btn, "ButtonHover") plays forward on hover, reversed on leave. See Hover Animations.
Batch and stagger — Run one clip on a list of elements with a cascade delay: Anim.playBatch(items, "FadeIn", { stagger = 0.06 }). See Reuse & Batch.
Effects — Animate BlurEffect, ColorCorrectionEffect, BloomEffect, Camera FOV, and more directly from the timeline. Effects are created and cleaned up by the runtime automatically.
Signals — React to animation lifecycle events without polling:
local h = Anim.play("Intro")
h.Completed:Connect(function()
Anim.play("IdleLoop", { loop = true })
end)
Where to go next¶
| Goal | Page |
|---|---|
| What changed in each plugin version | Changelog |
| Install the plugin and create your first animation | Getting Started |
| Lay out ScreenGuis on a canvas (beta) | UI Designer — Overview |
| Understand the editor layout and workflow | Timeline Animator — Overview |
| Optional UI colour packs (Creator Store) | Theme packs |
| 2D UI particles on frames (experimental) | Particles |
| Tools widget and Xocoatl features (viewport selection path) | UI Tools — Overview |
| Edit multi-stop gradients and presets | Gradient Editor |
| Animate relative to starting position | Delta Mode |
| Reuse one animation on many UI elements | Template Animations |
| Add hover effects to buttons or cards | Hover Animations |
| Reveal lists, cards, or grids with stagger | Reuse & Batch |
| Full runtime API reference | UIAnimController |
Feedback & Support¶
Found a bug or have an idea?
| Developer Forum — plugin thread | Reply on the thread for bugs, features, or questions (public, searchable). |
| Discord | Join the community server if you prefer chat. |
| Ko-fi (ChocoBasta) | Optional — support development if you find Xocoatl useful. |
Top bar (every page): Plugin version (v0.2.0 - B35 - P10) → Plugin thread (Roblox DevForum) → Discord → Ko-fi — same links as the table, as compact chips on the right.
The Developer Forum link is what Options → Report copies inside the plugin (Discord is linked from the thread’s first post, not in the plugin). Ko-fi is docs-only.