Skip to content

DevForum post — v0.1.2 era (combined overview + update)

{% hint style="info" %} Why this page looks different

This release was originally posted as a single DevForum thread that mixed the full plugin overview with the Xocoatl features update (viewport breadcrumb). For day-to-day docs, prefer Home and Getting Started; this page preserves that post’s structure for parity with the forum.

{% endhint %}

Xocoatl is a UI animation plugin for Roblox Studio. It comes with a full timeline editor, a small runtime you drop into your game once, a colour picker, and a set of UI tools.

Here's what's in it.

Timeline Animator

The core of it. You pick a UI element, set it as the animation target, and start adding tracks. Each property you want to animate gets its own row — Position, Size, BackgroundColor3, Transparency, Rotation, whatever. You scrub to a time, set a value, move the scrubber, set another, and that's a keyframe.

Every keyframe has its own easing. Right-click one to pick from Linear, Quad, Sine, Back, Bounce, Elastic, and more — In, Out, or InOut. The curve preview shows you what it'll feel like before you play it.

A few things that work well:

Delta mode — there's a toggle on every property track. Turn it on and the keyframe values become offsets from wherever the element starts, not fixed positions. So a "bounce up 20px" clip works on any button, anywhere on screen. One clip, reusable everywhere.

Colour tracks — Color3 properties (BackgroundColor3, TextColor3, ImageColor3 etc.) show a live colour swatch in the track row. Click it, the colour picker opens. Pick your colour, confirm, keyframe done.

Compound sub-rows — Position and Size are made of four components. Expand the track and you get individual X Scale, X Offset, Y Scale, Y Offset rows, each with its own input. Useful when you only want to move something on one axis.

Effects — BlurEffect, ColorCorrectionEffect, BloomEffect, Camera FOV — all animatable from the timeline. The runtime creates and cleans them up automatically.

Undo/redo — full stack, covers everything: keyframes, properties, adding or removing elements, easing changes, all of it.

(Timeline GIFs were posted on the DevForum thread.)

Playing animations in-game

You install the runtime once (there's a button in the plugin landing screen). Then from any LocalScript:

local Anim = require(
    game.Players.LocalPlayer.PlayerScripts.Xocoatl.UIAnimController
)

Anim.play("ShopOpen")

-- Same clip backwards — design open once, get close for free.
Anim.play("ShopOpen", { reverse = true })

Anim.play("IdleFloat", { loop = true })

Anim.play("Intro", { delay = 3 })

Anim.play("ClickPop", { reset = true })

Handle-based control:

local handle = Anim.play("SlideIn")

handle.pause()
handle.resume()
handle.scrub(0.5)
handle.stop()

Useful API shortcuts:

  • Anim.playOn(inst, "CardReveal") — applies a clip to any element at runtime instead of the one it was built on.
  • Anim.bindHover(btn, "ButtonHover") — MouseEnter forward / MouseLeave reversed.
  • Anim.playBatch(cards, "FadeIn", { stagger = 0.06 }) — staggered list or grid reveals.
  • Anim.sequence({ { name = "SlideIn" }, { name = "Pulse" } }) — chain clips without nesting callbacks.
  • Anim.clearInstance(frame) — stop everything on that root before hiding or destroying UI.

See UIAnimController for the full API.

Hierarchy explorer

The left panel shows the full descendant tree of your animation target. Add elements to tracks from there; use the search bar to filter by name.

Add From Selected — select multiple elements in the Studio Explorer, click the button, and they're all added at once.

UI Tools

A separate widget with common utilities:

Align — snap AnchorPoint and Position to a 3×3 grid.

Simple Move — nudge by fixed scale or offset steps.

Color Presets — palettes and swatches; syncs with the colour picker.

Rich Text — WYSIWYG for TextLabel / TextButton / TextBox.

Conversion — Scale ↔ Offset; aspect constraint helpers.

UI Converter — class swaps while preserving shared properties and children.

Copy Path — dot-separated Explorer path for scripts.

(Tools widget GIF was posted on the DevForum thread.)

Xocoatl features

On top of slot tools, there's a separate dialog called Xocoatl features — optional Studio-only conveniences (not the same as Preferences).

Open the Tools widget from the toolbar, then either:

  • Click the Xocoatl features row in the list (same area as Align, Rich Text, etc.), or
  • Use the small square control at the bottom-right of the tools dock — hover to reveal it, then click.

Everything in this dialog starts off; what you turn on is saved with the plugin.

Selection path in viewport — when enabled, a breadcrumb at the top-left of the Studio viewport follows your Explorer selection. The selected instance name reads in bold. Long paths collapse from the left; hover the icon on a collapsed chip to expand that segment in place.

(Screen recording was posted on the DevForum thread.)

Combined overview + latest editor update. Plugin build 0.1.2.

Plugin: Xocoatl on Creator Store

← All releases