How to make a tween with UI Corner

Help and Feedback Scripting Support
1

I want to make a tween that can make the corners of an object smoothly transition similar to how discord does.

2

Sorry not following, can you describe what transition exactly? Are you talking about the left bubbles sidebar when you hover or?

3

More like when you select the home button.

4

You can use TweenService. The CornerRadius is a UDim property.

1 Like
5

Just tween the CornerRadius property of the UICorner.

6

I’m not sure exactly what you want, but here’s an example of how to tween the CornerRadius on a UICorner

local TweenService = game:GetService("TweenService")

local tween = TweenService:Create(script.Parent.UICorner, TweenInfo.new(10), {CornerRadius=UDim.new(0, 50)})

tween:Play()

CornerRadius is a UDim

8

h06on9_84411

You’re reading the wrong page.

9

I know. I wanted to say it said UDim, but it’s a Vector2, though it’s not.

10

Basic Function

local tweenService = game:GetService("TweenService")

local uiCorner = script.Parent
local frame = uiCorner.Parent

local square = tweenService:Create(uiCorner, TweenInfo.new(0.1), {CornerRadius = UDim.new(0,15)})
local circle = tweenService:Create(uiCorner, TweenInfo.new(0.1), {CornerRadius = UDim.new(1,0)})

frame.MouseEnter:Connect(function()
	square:Play()
end)

frame.MouseLeave:Connect(function()
	circle:Play()
end)

This is also assuming a hierarchy of:

  • PlayerGui
    • ScreenGui
      • Frame
        • UICorner
          • LocalScript
2 Likes