Cascade UI Animator
Keyframe animations for Roblox UI. Build once, use in any game.
See it in action
What does it do?
Cascade is a timeline editor that lets you keyframe any UI property — position, size, transparency, color, rotation, scale — and play them back at runtime with a two-line API.
Animations save as ModuleScripts inside your game. No external files, no exporting. The runtime reads them directly.
The Runtime
Cascade includes a lightweight AnimationService that runs in-game. It uses an additive accumulator — multiple animations on the same property blend together instead of overriding each other. A hover, a click, and a shake can all run on the same button at the same time.
Features
Animation Blending
Multiple animations on the same property blend additively. Hover + click + shake all on one button — they combine instead of fighting.
Axis Isolation
Animate Position.X without touching Position.Y. Animate Size.X.Scale without affecting Size.X.Offset. Each axis is independent.
Relative Mode
Toggle any track to relative — values become deltas instead of absolutes. A hover that adds +0.05 to Scale works whether the button’s base scale is 1.0 or 2.0. Makes animations reusable across different UI elements.
PlayBatch with Stagger
Play the same animation on multiple instances with a cascading delay. One call animates an entire grid of items, each starting a fraction of a second after the last.
Reverse Playback
Play any animation backwards with { Reverse = true }. Use the same hover animation for mouse enter and mouse leave — no separate animation needed.
Animation Events
Place event markers on the timeline with typed data (String, Number, Boolean). Your script reacts when the animation reaches them — trigger sounds, swap text, spawn particles, all synced to the animation.
Auto-Record
Toggle recording and drag UI elements in the viewport. The plugin captures property changes as keyframes automatically. No manual value entry needed.
Smart Input
Type values in any reasonable format — 255, 128, 64 for a color, .5, .3 for a UDim2. The parser figures out what you mean.
Full Undo/Redo
50-level history stack. Every action is undoable.
Customizable Keybinds
Rebind every shortcut to match your workflow. Persists across sessions.
Supported Properties
All GuiObjects
Position, Size, Rotation, AnchorPoint, BackgroundColor3, BackgroundTransparency, BorderColor3, BorderSizePixel, Visible, ZIndex
Text Elements
TextColor3, TextTransparency, TextStrokeColor3, TextStrokeTransparency, TextSize, MaxVisibleGraphemes
Image Elements
ImageColor3, ImageTransparency
ScrollingFrame
CanvasPosition, CanvasSize, ScrollBarImageColor3, ScrollBarImageTransparency
UI Components
UIStroke (Color, Transparency, Thickness), UICorner (CornerRadius), UIGradient (Transparency, Rotation, Offset), UIPadding (all directions), UIScale (Scale)
All composite types expand into sub-properties — UDim2 splits into X.Scale, X.Offset, Y.Scale, Y.Offset for axis isolation.
Runtime API
The runtime is a single module you drop into ReplicatedStorage. Install it from the plugin menu.
Fire and forget:
local AnimationService = require(ReplicatedStorage.CascadeRuntimeEngine.AnimationService)
local config = require(ReplicatedStorage.CascadeAnimations.MyAnimation)
-- Play on one instance
AnimationService.Play(myFrame, config)
-- Play on multiple instances with stagger
AnimationService.PlayBatch(buttons, config, { Stagger = 0.1 })
-- Play in reverse
AnimationService.Play(myFrame, config, { Reverse = true })
-- Reset properties when done
AnimationService.Play(myFrame, config, { Reset = true })
Track-based control:
local track = AnimationService.CreateTrack(myFrame, config)
track.Completed:Connect(function()
print("Done")
end)
track.MarkerReached:Connect(function(name, data)
if name == "PlaySound" then
soundEffect:Play()
end
end)
track:Play()
track:SetSpeed(2) -- 2x speed
track:Scrub(0.5) -- Jump to 0.5s
track:Pause()
track:Destroy()
Batch with events per instance:
local batch = AnimationService.CreateBatchedTrack(stars, config, { Stagger = 0.15 })
batch.MarkerReached:Connect(function(name, data, instance)
-- Each star triggers its own sound when it lands
playChime(instance)
end)
batch:Play()
All Play options:
| Option | Type | Description |
|---|---|---|
| Delay | number | Wait before starting |
| Loop | bool/number | true = infinite, N = count |
| Reverse | bool | Play backwards |
| Reset | bool | Restore original values on cleanup |
| Stagger | number | Delay between batch instances |
| DeleteOnComplete | bool | Auto-destroy when finished |
| StartTime | number | Start from specific time |
Service API Reference
| Function | Description |
|---|---|
Play(instance, config, options?) |
Play animation, returns signal |
PlayBatch(instances, config, options?) |
Play on multiple instances |
Pause(instance, config) |
Pause animation |
Resume(instance, config) |
Resume paused animation |
Stop(instance) |
Stop all animations on instance |
CreateTrack(instance, config, options?) |
Manual control track |
CreateBatchedTrack(instances, config, options?) |
Manual batch track |
SetTime(instance, config, time) |
Scrub to time |
SetFrame(instance, config, frame) |
Scrub to frame |
ClearInstance(instance) |
Remove all animations + reset |
Track signals: Completed, Looped, Cancelled, MarkerReached
Support
Cascade is a paid plugin. Developing this system has taken a lot of time and testing. By purchasing it, you’re supporting continued development — new features, expanded property support, and improvements based on your feedback.
If you use it, a review on the store page means a lot.
