Hi Creators!
We’re excited to announce Styling Transitions, a performant, scalable, and seamless way to add polish and motion to your interfaces. Transitions allow you to define how property values tween over a set duration directly in Stylesheets, moving your UI logic into a clean, no-code declarative workflow. You can use Transitions to build buttons that gently pop when hovered, frames that slide out to reveal extra content, cards that rotate slightly when pressed, and more!
What’s Included?
-
Full Range of Capabilities: Support for TweenInfoparameters, including duration, easing styles (like Elastic or Cubic), easing directions, and start delays. -
Seamless Styling Integration: Automatically animate changes to any styleable property like BackgroundColor3,Size, orRotationwhen an element’s style changes. -
Input-Based Motion: Easily create high-fidelity hover and pressed states by defining transitions that trigger automatically when a user interacts with your UI. -
Edit-time Preview: Transitions are evaluated by the Style Engine at edit-time in Studio, allowing real-time preview of UI animation for the first time while authoring!
Keep reading for more details on how to try these out 
How to Enable the Beta
- Navigate to File > Beta Features.
- Find and check the box for Styling Transitions.
- Restart Roblox Studio when prompted.
What are Styling Transitions?
Styling Transitions are a way to set up simple tween effects that automatically occur when the styles applied to an instance are changed. A Transition is defined using the same properties you’re already familiar with if you’ve used TweenService:
- Duration: The total length of the animation in seconds, which defines how long it takes to get from Point A to Point B. A low duration makes the UI feel snappy, while a high duration makes the UI feel more cinematic.
- EasingStyle: The curve of movement that controls the acceleration and deceleration of the change. Check out the linked documentation to read more about different styles.
- EasingDirection: Determines which end of the transition the Easing Style is applied to: the start (In), the end (Out), or both (InOut).
- Delay: A “wait period” in seconds. The property won’t start changing until this amount of time has passed after the trigger.
You can either define Transitions explicitly per-property, or you can set a “Default Transition” that applies to all properties. If both are set within the same hierarchy, the per-property Transition(s) will take precedence over the Default Transition.
Building Higher-Fidelity UI with Transitions
Adding simple Transitions automatically elevates your UI, and they’re easy to start integrating into your StyleSheets! Everything shown below is embedded within this sample file, which has more examples for you to explore: StylingTransitionsDemo.rbxl
You can implement Transitions using either the Style Editor for a no-code workflow or through Luau scripts for more dynamic control.
Using the Style Editor
Adding Transitions in the Style Editor works like adding any other styled property. (Friendly plug – if you want to learn more about other Style Editor workflows, check out this documentation.)
Let’s walk through how to create a simple hover transition.
- Select the UI element in the Style Editor – here, we’re using
TextButton. - Add the properties you want on the default button – below, we’ve added a
FontFace,Size,andTextSize. - Underneath the
TextButton, add a Hover GuiState. Under Hover, add the properties you want when the hover state is active – below, we’ve changed theBackgroundColor3,Size, andTextColor. - Next to the Hover row, click on the three dots, then Insert > Transition. This transition applies when a player enters Hover.
- Configure your Tween parameters: Set your duration, easing style, and delay.
- Add a Default Transition to
TextButton(using Insert > Transition like above), which transitions all properties back to their original values when exiting the Hover state.
Your Style Editor should look like this once you’ve completed the above steps:
To test out your new transition, add a ScreenGui in your DataModel, put some TextButtons inside, and add the StyleLink to this StyleSheet. At edit-time, when you hover over the buttons, you’ll see something like this!
Using Luau Scripts
For those who prefer a script-first workflow, we’ve also added support for new methods for Transitions to the StyleRule class! You can set transitions for individual properties or batch them together using a dictionary. Check out the technical documentation here.
Here’s an example of how you can create another hover transition using scripts. You can find this script in the above sample placefile as well.
Click here to view the script:
local ReplicatedStorage = game:GetService("ReplicatedStorage")
if not script.Parent.Enabled then return end
-- 1. Create the StyleSheet
local sheet = Instance.new("StyleSheet")
sheet.Name = "ScriptedDemo"
sheet.Parent = script
-- 2. Create the Base Rule for the Frame
local baseRule = Instance.new("StyleRule")
baseRule.Selector = ".Tagged"
baseRule.Name = ".Tagged"
baseRule:SetProperties({
BackgroundColor3 = Color3.fromRGB(240, 240, 240),
Size = UDim2.fromOffset(100, 100),
})
baseRule:SetPropertyTransitions({
["*"] = TweenInfo.new(0.25),
BackgroundColor3 = TweenInfo.new(
0.5, -- Duration
Enum.EasingStyle.Cubic, -- EasingStyle
Enum.EasingDirection.Out, -- EasingDirection
0, -- RepeatCount
false, -- Reverses
0 -- Delay
),
})
baseRule.Parent = sheet
-- 3. Create the Base Pseudo-Instance Rule for UICorner
local baseCornerRule = Instance.new("StyleRule")
baseCornerRule.Selector = ".Tagged::UICorner"
baseCornerRule.Name = ".Tagged::UICorner"
baseCornerRule:SetProperty("CornerRadius", UDim.new(0, 0))
-- Make sure the corner radius also smoothly transitions!
baseCornerRule:SetPropertyTransitions({
["*"] = TweenInfo.new(0.25)
})
baseCornerRule.Parent = sheet
-- 4. Create the Hover Rule for the Frame
local hoverRule = Instance.new("StyleRule")
hoverRule.Selector = ".Tagged:Hover" -- Using standard capitalized :Hover for Roblox GuiStates
hoverRule.Name = ".Tagged:Hover"
hoverRule:SetProperties({
BackgroundColor3 = Color3.fromRGB(50, 95, 255),
Size = UDim2.fromOffset(125, 125),
})
hoverRule.Parent = sheet
-- 5. Create the Hover Pseudo-Instance Rule for UICorner
local hoverCornerRule = Instance.new("StyleRule")
hoverCornerRule.Selector = ".Tagged:Hover::UICorner"
hoverCornerRule.Name = ".Tagged:Hover::UICorner"
hoverCornerRule:SetProperty("CornerRadius", UDim.new(1, 0))
hoverCornerRule.Parent = sheet
-- 6. Create the StyleLink
local styleLink = Instance.new("StyleLink")
styleLink.Name = "ScriptedDemoLink"
styleLink.StyleSheet = sheet
styleLink.Parent = script.Parent
-- 7. Create the Frame and apply the tag
local frame = Instance.new("Frame")
frame.Parent = script.Parent
frame.Position = UDim2.new(0.5, 0, 0.1, 0)
frame.AnchorPoint = Vector2.new(0.5, 0.5)
frame:AddTag("Tagged")
At run-time, the script above generates the below UI and applies the transition!
Release Notes
-
Trigger Constraints: Transitions only fire when a property is changed via the Styling system (like a Tag or GuiState change). They will not fire for non-styling changes, like size or position changes due to layout.
-
Priority Hierarchy: Remember that a StyleRule’s priority affects the order in which rules are applied. To ensure a transition isn’t ignored, its StyleRule must have a higher Priority value (or be positioned above the base rule in the Style Editor) so it correctly overrides the default style.
-
Performance: Transitions are handled natively by the engine, offering better performance than manual Luau tweening, and performance won’t be a problem unless you have hundreds of Transitions playing concurrently. Note that per-property transitions are more performant than default transitions.
-
TweenService: We are not deprecating TweenService; Transitions integrate tween capabilities directly into the Styling ecosystem.
Made with love
New Styling features were made possible thanks to @TangyTrout, @uiuxartist, @DrRanchDressing, and @IgnisRBX. While you’re testing out Transitions, we’ll be hard at work building the next set of UI features to ensure you have the best systems for your UI projects.
We can’t wait to hear your thoughts and see all the amazing things you create! Let us know about your experience and if you encounter any issues! 
feature
