Animation Pro

Quick start

Animation Pro 1.0 runs inside Roblox Studio and authors motion for UI under StarterGui.

1. Prepare a test interface

Create or duplicate a ScreenGui with the menu and buttons you want to animate. Keep a Studio version checkpoint before applying the plugin to important UI.

2. Enable Animation Pro

Install and enable the plugin, then press Animation Pro in the Studio plugin toolbar. The floating viewport toolbar contains:

UI Type | Animation | Status | Play Selected | Save | Clear | Options

Use the ... handle to move the toolbar. Its position is saved between Studio sessions.

3. Configure and save the main UI first

1. Select a Frame or CanvasGroup under StarterGui.
2. Open UI Type and choose Frame.
3. Open Animation, choose the Frame’s Open effect and preview it.
4. Switch to Close, choose the Frame’s Close effect and preview it.
5. Press Save only after both animations are configured.

Saving confirms the main Frame and makes it available as a link target for the other three UI types.

4. Link the other UI to the saved Frame

After the main Frame is saved, select the secondary UI and choose one of these three types:

Then:

1. Use Link to saved Frame and choose the main UI you saved in the previous step.
2. Choose the animations available for the selected secondary type.
3. Preview the result.
4. Press Save to confirm the link and animations.

The order matters: save the main Frame first, then configure and link HUD Buttons, Close Buttons or Frame Children. Frame Children participate in the Frame’s transition; they do not toggle or close it themselves.

Core workflow

Animation Pro uses a parent-first workflow:

1. Select the main Frame or CanvasGroup in Studio.
2. Choose Frame as its UI Type.
3. Choose and preview both its Open and Close animations.
4. Press Save. This creates the saved Frame that everything else links to.
5. Select a HUD Button, Close Button or one or more Frame Children.
6. Choose the matching UI Type.
7. Link the selection to the saved main Frame.
8. Choose the secondary role’s Hover/Click or Entrance/Exit animations.
9. Use Play Selected or automatic preview to review the motion.
10. Open Properties to tune the effect.
11. Press Save to confirm the secondary configuration.
12. Test the complete linked workflow in Play mode.

Choosing an effect or changing a property creates a draft. The toolbar shows Saved only after the current configuration has been confirmed with Save.

UI types

Only Frame Children supports multi-selection. HUD Button and Close Button must be a TextButton or ImageButton.

All configured UI must be under StarterGui when it is saved. Configure and save the main Frame before assigning any of the other three roles, because those roles need a confirmed Frame to link to.

Animation browser

Open the Animation menu to browse effects available for the current UI type.

• Use search to filter by an effect name or description.
• Switch between the role’s categories, such as Open and Close.
• Press Fav to keep an effect in the persistent favorites list.
• Enable the favorites-only view to narrow a large result set.
• Choose compact or comfortable browser density in Settings.

Preview and save

Play Selected

Play Selected runs the current effect in Studio and returns the interface to its starting appearance when the preview finishes.

Starting a new preview safely ends the earlier preview before playing again.

Automatic preview

When Auto preview is enabled, selecting an effect and changing most numeric properties starts a preview automatically. Turn it off when tuning a large selection or when you want to make several changes before playback.

Try Hover / Hold

For HUD and Close buttons, the temporary Try Hover / Hold control lets you test the selected button’s hover and pressed response directly from the plugin interface.

Save

Press Save after the animation, properties and links are correct. A successful save confirms the current UI role, chosen effects, property changes and link to the target Frame.

Animation properties

Open Options → Properties to edit the current effect. Animation Pro displays only controls that affect the selected animation.

Use a preset when you want the same tuning on another object.

Frame Children

Frame Children creates coordinated entrance and exit motion across multiple UI objects.

Configure a group

1. Save the parent Frame first.
2. Multi-select the child GuiObject instances.
3. Choose Frame Children.
4. Link the selection to the saved parent Frame.
5. Choose Entrance or Exit and an effect.
6. Adjust Child Stagger and Stagger Direction if needed.
7. Press Save.

The preview shows the selected group as a coordinated entrance or exit wave.

Layout-controlled children

If a selected child is positioned by a Roblox layout object, position-heavy motion can conflict with that layout. Place the visible content inside a simple full-size inner Frame, then select and configure the appropriate child UI according to the warning shown by Animation Pro.

Buttons and linking

HUD and Close buttons must link to a saved Frame before they can be saved. The correct order is always: configure the main Frame, choose its Open and Close animations, save it, then configure and link the button.

HUD Button

A HUD Button supports Hover and Click effects. A valid press toggles its linked Frame.

Close Button

A Close Button uses the same Hover and Click categories, but its action closes the linked Frame.

Reinforced press handling

Animation Pro keeps configured buttons responsive even when the selected effect changes their visual size or position. Test every button with the mouse, touch emulation and gamepad input your experience supports.

For layout-controlled buttons, center the parent layout on both axes for the cleanest position-based hover and click motion. Animation Pro warns when a UIListLayout or UIGridLayout alignment is likely to reduce that motion.

Developer API

Animation Pro provides a client API for developers who want custom controls beyond the automatically linked HUD and Close buttons. Use it from a LocalScript after the target Frame or CanvasGroup has been configured and saved with Animation Pro.

Get the API

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local AnimationProAPI = ReplicatedStorage:WaitForChild("AnimationProAPI")

Supported actions

For target, pass the configured UI from the player’s PlayerGui, a configured linked UI instance, or the exact saved Frame name. Passing the UI instance is recommended when two interfaces share the same name.

Control a menu from custom code

Replace MenuGui and MainMenu with the names used in your experience.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local playerGui = Players.LocalPlayer:WaitForChild("PlayerGui")
local menuGui = playerGui:WaitForChild("MenuGui")
local mainMenu = menuGui:WaitForChild("MainMenu")
local AnimationProAPI = ReplicatedStorage:WaitForChild("AnimationProAPI")

AnimationProAPI:Fire("Open", mainMenu)
AnimationProAPI:Fire("Close", mainMenu)
AnimationProAPI:Fire("Toggle", mainMenu)
AnimationProAPI:Fire("Set", mainMenu, true)

Connect a custom button

customButton.Activated:Connect(function()
	AnimationProAPI:Fire("Toggle", mainMenu)
end)

The API controls client UI only. Use Roblox remotes and server validation separately for purchases, rewards, permissions or any other server-authoritative game action. Only the supported integration calls are documented here; Animation Pro’s internal implementation is intentionally omitted.

Warnings and guidance

Animation Pro shows guidance when the current setup may need attention. These cards can be dismissed individually and are arranged so multiple messages remain readable.

• Layout compatibility: recommends layout alignment changes when button motion could look reduced or offset.
• CanvasGroup recommendation: suggests a CanvasGroup when it will produce a cleaner Close result.
• Large UI performance: recommends simplifying an unusually large animated interface for lower-end devices.

Each warning can be disabled from its card or from Settings.

Canvas groups

Animation Pro can animate both ordinary Frames and CanvasGroups.

For the cleanest Close finish, use a CanvasGroup as the saved Frame.

An ordinary Frame still opens and closes normally. Animation Pro shows a recommendation when a CanvasGroup may give a more polished result; the warning can be disabled in Settings.

Layouts

Roblox layout objects can own the position of their children. Keep these rules in mind:

• Center a button’s UIListLayout or UIGridLayout alignment when using position-heavy Hover and Click effects.
• Give layout-controlled Frame Children a full-size inner motion Frame.
• Test grid and list animations at every target resolution.
• Prefer scale and rotation effects when the layout must strictly control position.

Animation Pro warns about common conflicts, but other plugins, scripts and custom UI frameworks may still affect the result.

Presets and favorites

Favorites

Favorites store effect names for quicker browsing. They persist in Studio plugin settings and can be filtered from the animation browser.

Presets

Open Options → Presets, enter a name and press Save preset. A preset remembers:

• the animation category and effect;
• timing and intensity;
• supported movement, rotation and scale values;
• overshoot, settle and return settings;
• easing and child-stagger properties.

Presets never store UI bindings. Applying one to another object does not link that object to a Frame. Animation Pro retains up to 30 presets, removing the oldest when the limit is exceeded.

Settings

Open Options → Settings to configure the plugin interface.

Appearance

• Fourteen themes: Obsidian, Graphite, Slate, DeepBlue, Royal, MidnightPurple, Teal, Emerald, Rose, Crimson, WarmAmber, Sunset, Arctic and Mono.
• Compact or Standard toolbar density.
• Compact or Comfortable animation browser density.
• Source Sans, Gotham or Fredoka font.
• Regular, Medium, SemiBold or Bold weight.
• Adjustable text size and text stroke.

Behavior

• Plugin UI motion.
• Automatic animation preview.
• Keep Explorer selection while using the overlay.
• Layout compatibility warning.
• CanvasGroup Close recommendation.
• Large UI performance warning.
• Status text visibility.
• Remember the current animation category.

Settings also provide controls to reset the toolbar location or restore default settings.

Clear and Fixer

Clear

Clear opens a confirmation panel listing the affected UI. Confirming clears the Animation Pro setup from the selection and any linked items shown in the confirmation.

Clearing does not delete the UI object itself.

Fixer

Open Options → Fixer when a preview was interrupted or a saved setup needs repair. Fixer tools can:

• restore selected UI;
• restore all interrupted previews;
• repair the selected Animation Pro setup;
• remove selected Animation Pro data;
• reset floating plugin windows.

Use Studio Undo for recent authoring changes when possible. Keep normal place backups for larger edits.

Recommended workflow

1. Finish the visual layout before authoring strong position-based motion.
2. Select the main Frame or CanvasGroup and choose Frame.
3. Choose and preview both the main UI’s Open and Close effects.
4. Press Save to confirm the main Frame.
5. Select a HUD Button, Close Button or Frame Children and choose that UI Type.
6. Link the secondary UI to the saved main Frame.
7. Choose Hover and Click for a button, or Entrance and Exit for Frame Children.
8. Use Play Selected after every meaningful property change.
9. Press Save to confirm each linked secondary role.
10. Enter Play mode and test the full Open, Close and child-transition flow.
11. Repeat the test with mouse, touch emulation and gamepad input where relevant.
12. Use Fixer if a saved setup or interrupted preview needs repair.

Testing checklist

Frame states

• Open starts from the intended hidden or offset state and settles exactly on the authored UI.
• Close finishes cleanly and leaves the Frame ready for the next Open.
• Toggle remains correct during repeated and rapid input.
• CanvasGroup transparency returns to its authored value after Open.

Buttons

• Hover returns cleanly when the pointer leaves.
• Click fires once even when the animation moves or shrinks the button.
• HUD Button toggles the correct Frame.
• Close Button closes the correct Frame.
• Text and icon children remain visually aligned during button motion.

Frame Children

• Every child is linked to the intended Frame.
• Entrance and Exit waves follow the intended spatial direction.
• The stagger is readable without making the group feel slow.
• Layout-controlled children use an inner motion Frame when required.

Devices and interruption

• Test mouse, touch and gamepad input used by the experience.
• Spam Open and Close to verify interruption recovery.
• Reopen the menu after a Close finishes.
• Test at the smallest and largest supported viewport sizes.

Troubleshooting

The toolbar says to select UI in Studio

Select a GuiObject under StarterGui. Animation Pro does not save configuration to arbitrary objects outside the Studio UI hierarchy.

A button or child says it needs a Frame link

Save the target Frame first. Reselect the button or Frame Children, choose the correct UI Type, then use the link control to choose that saved Frame.

Save says an animation is missing

Choose at least one category supported by the current UI role. A Frame needs an Open or Close effect; buttons need Hover or Click; Frame Children need Entrance or Exit.

Position motion is weak in a list or grid

The parent layout may be overriding the object’s Position. Center the layout for supported button motion, choose a scale/rotation-focused effect or animate a full-size inner Frame.

The UI stayed in a preview state

Open Options → Fixer and use Restore selected UI or Restore all interrupted previews. Run the general repair option afterward if the saved setup still needs attention.

A Developer API call does nothing

Confirm that the target Frame or CanvasGroup was saved in Animation Pro, the call is made from a LocalScript, and the target is the copy under the current player’s PlayerGui. When using a name, confirm that it exactly matches the saved Frame name. If names are duplicated, pass the UI instance instead.

Two actions fire from one button press

Do not bind a second toggle or close action to the same configured HUD or Close button unless the duplicate behavior is intentional. These roles already perform their linked action automatically.

Limitations

• Animation Pro is an authoring and playback tool for Roblox GuiObject instances; it is not a general 3D character or camera animation editor.
• Layout objects, other plugins and custom UI scripts may affect the final motion.
• Ordinary Frames cannot use whole-hierarchy transparency like CanvasGroups.
• Preview accuracy depends on the Studio viewport and the current rendered UI state.
• The Developer API controls client UI and does not replace server validation for gameplay actions.
• Important projects should be tested in a duplicate place before publishing to a live experience.

Review the complete UI in Play mode after every significant change and keep normal Studio version history or source-control backups.