Cascade UI Animator
Full Documentation | Store Link | Show case | Feedback/Bugs
Is a keyframe based UI Animator Plugin that easily handles complex UI animations.
Cascade blends animations with an Additive Accumulator using a custom runtime engine. This means you can play a Hover scale, a Click punch, and a Damage Shake all on the same button at the same time, and they blend perfectly.
Why use this over standard Tweening?
I wanted to work more effeciently with UI animations. Because honestly UI code and animations are tedious to write, so I created this plugin as a way to create reusable animations. Cascade UI holds the animator for you, as a developer you don’t need to keep track of any objects created by the runtime engine.
- No Property Fighting: Multiple animations can influence the same property (like Scale or Position) simultaneously.
- Hybrid Track Modes: Unlike other animators that lock you into one workflow, Cascade allows you to toggle between Absolute and Relative modes on a per-track basis.
- Highly Optimized: Designed to handle thousands of animated objects with a built-in preprocessing system to minimize runtime overhead.
Absolute vs. Relative Tracks
- Absolute Tracks: These define a specific target (e.g., “Move to Position 0.5, 0”). This is perfect for entrance animations where an element must land in a exact spot.
- Relative Tracks (Delta): These define an offset (e.g., “Add 10 pixels to current Width”). By activating relative mode on specific tracks, your animations become resolution-independent and stackable. You can have a button that “pops” (+0.1 Scale) regardless of whether its base scale is 1.0 or 2.0.
Example Animations
Isolated Size Axis with Staggered frames
1500 frames animating as a batch with Stagger
Key Editor Features
-
Animation Events Create markers on the events track and set the data type with a value to use for triggering sound or any other logic that needs to react to the animation.
-
Set Frames and Length: Set the number of frames the animations should have, and set length in seconds for the animation.
-
Axis Isolation: Animate
Size.Xindependently ofSize.Yfor more fluid, organic motion. -
Smart Inspector: Input values using loose syntax; the inspector automatically formats them to Roblox standards.
-
Multi-Select & Drag: Box-select keyframes across different tracks to retime complex animations in seconds.
-
Auto-Record: Capture motion naturally by moving elements in the viewport while the editor logs the changes.
-
Non-Destructive Editing: Full support for Undo, Redo, Cut, Copy, and Paste
-
Keybind Settings -Change plugin keybinds to match your own flow.
Easy-To-Learn API
The AnimationService is a robust runtime engine that is easy to integrate into your scripts:
Service-Only
local MyFrame = script.Parent.Frame
local Config = require(config)
-- Play using the service. The service manages the track internally.
AnimationService.Play(MyFrame, Config, { Reset = true })
task.wait(1)
-- New Feature: Pause via the service without needing a track variable
AnimationService.Pause(MyFrame, Config)
task.wait(1)
-- Cleanup: Stops animations and resets ALL properties defined in 'Config'
-- (e.g., Rotation, Size, Transparency) back to their original state.
AnimationService.ClearInstance(MyFrame)
Track-Based
local MyFrame = script.Parent.Frame
local Config = require(config)
-- Create the track manually
local track = AnimationService.CreateTrack(MyFrame, Config)
-- Connect to track events
local con = track.Completed:Connect(function()
print("UI Transition Finished")
end)
con:Disconnect()
track:Play()
task.wait(0.5)
track:SetSpeed(2) -- Speed up the UI animation dynamically
track:Scrub(0) -- Instant rewind to the start
-- Cleanup: The Service automatically detects destruction and performs cleanup
track:Destroy()
Support
Cascade UI Animator is a paid plugin. Developing this complex system has taken a lot of time and testing. By purchasing this plugin, you are directly supporting me as a developer, allowing me to continue updating the system, adding features like Animation Events (syncing sound/logic to the timeline), and expanding component support and properties, and more see Roadmap in docs). I’m very passionate about this project and I want to make this plugin the go to for UI Animations!
If you decide to give it a go, please give it a review on the store page!
Thank you for checking out Cascade UI Animator. I can’t wait to see the animations you create with it!
