Twinkle UI animator module is a lightweight, open-source UI animation module for Roblox developers. Designed to eliminate boilerplate tween code, UIAnimator gives you a clean, expressive API to animate frames, buttons, and text with minimal setup.
No hardcoded blur instances, no manual TweenService chains, no copy-pasting hover logic across every button. UIAnimator handles it all automatically through a tag and attribute system built directly into Studio.
Beauty of this module is that it comes loaded with some basic frame and button animations along with complicated text effects that would have otherwise taken hours of useful time.
(Note: Features and Hierarchy are continously being updated to make installation and customizibility easier so the actual hierarchy or UI may differ upon first installation compared to the one from the images)
Features & Examples
(
Note: There maybe one or more dropdowns within the dropdown which explains how to set up the feature. Please read it to avoid confusion early on)
Custom text effects!
Expand to view full feature
-
Typewriter:
-
Shootout:
-
Jittery:
-
Plop In:
-
Glitch:
-
Fade In:
Here's how to set it up
-
Make sure the TextLabel which you are going to animate is within a frame
-
Write this code:
local Container: Frame = path.to.your.containerFrame
local Label: TextLabel = Container:WaitForChild("Label")
UIAnimator.ShowText(Container, Label, nil, {
effect = "Glitch",
})
- The reason we are using a container and then a text label inside is because the UIAnimator module has to create a lot of duplicate texts to render each word letter-by-letter. And that list will grow the more letters you have in that sentence.
Custom button hover!
Expand to view full feature
Custom button press!
Expand to view full feature
Cursor ripple effect!
Expand to view full feature
Sequence (advanced tutorial)
Expand to view full feature
The .Sequence() function is one of the powerful advanced function to help you queue (or sequence) any public functions without having to manually do task.wait() between each line of code.
This function is especially very helpful for NPC dialogue system.
function UIAnimator.Sequence(steps: {{[string]: any}}, options: {
}?)
end
Here are some ways in which you can use the sequencer to queue things for you:
First method:
-- Basic sequence, yields the calling thread until done
UIAnimator.Sequence({
{fn = UIAnimator.FrameZoom, args = {frame, true, 0.4}},
{wait = 0.5}, -- Waits 0.5s before running the next animation
{fn = UIAnimator.FrameSlide, args = {panel, true, 0.3}},
{fn = UIAnimator.ShowText, args = {container, label, "Hello!"}},
})
Second method:
-- Two steps running alongside each other
UIAnimator.Sequence({
{fn = UIAnimator.FrameZoom, args = {frame, true, 0.4}},
{parallel = true}, -- Runs 'FrameZoom' and 'FrameBounce' at the same time
{fn = UIAnimator.FrameBounce, args = {otherFrame}},
})
Third method:
-- Non-blocking, caller continues immediately
UIAnimator.Sequence({
{fn = UIAnimator.FrameZoom, args = {frame, true, 0.4}},
{wait = 1},
{fn = UIAnimator.Fade, args = {frame, false}},
}, {
parallel = true, -- By adding this, you can essentially run 2 UIAnimator.Sequence() calls in parallel
onComplete = function()
print("sequence finished")
end
})
Other misc. features
Expand to view feature
This UIAnimator module comes packed with a lot of functions and utilities and if I list them all here, it will take me another, ummm lets see, 5 hours or so (give or take). No thanks :')
Still, I would like to showcase the function headers here so you know they exist. How to use which function is very neatly defined in the comments above the function name inside the UIAnimator module so please do open it up and look at the comments.
You will also be shown the tooltips when you are calling the functions from another script. Anyways, here are some headers:
function UIAnimator.FadeSlideRunoff(element: GuiObject, speed: number?, blurEnabled: boolean?, hideOtherUi: boolean?, runOffAtEnd: number?, customStartPosition: UDim2?, customEndPosition: UDim2?, customTweenInfo: TweenInfo?)
function UIAnimator.FrameSlide(element: GuiObject, show: boolean, speed: number?, fadeIn: boolean?, blurEnabled: boolean?, hideOtherUi: boolean?, resetOgPos: boolean?, customStartPosition: UDim2?, customEndPosition: UDim2?, customTweenInfo: TweenInfo?)
function UIAnimator.FrameZoom(element: GuiObject, show: boolean, speed: number?, blurEnabled: boolean?, hideOtherUi: boolean?, startSize: UDim2?, customEndPosition: UDim2?)
function UIAnimator.Fade(element: GuiObject, show: boolean, speed: number?, blurEnabled: boolean?, hideOtherUi: boolean?, customTweenInfo: TweenInfo?)
function UIAnimator.FrameBounce(element: GuiObject, speed: number?, bouncePercent: number?)
function UIAnimator.ShowText(container: Frame, label: TextLabel, text: string?, options: ShowTextOptions?)
function UIAnimator.SetCameraProps(props: CameraProps?)
function UIAnimator.SetBlurSize(size: number?)
function UIAnimator.SetButtonStyle(element: GuiObject, options: {
hoverType: ("Lift" | "Bounce" | "Grow")?,
pressType: ("Shrink" | "Punch")?,
scalePercent: number?
})
- Drag and drop UIAnimator into Replicated Storage
- Drag and drop “Packages” folder into Replicated Storage
- You are good to go!
- [0.9.5] - Base version
Archives
I will ping you once I am done making this completely :')
Please get it from the post’s GitHub link!
