Animated UI not working

Hello, i created this animated UI and when you hover over the button the button fades in and a little red line is supposed to popup beside the white line. Animated UI.rbxl (23.8 KB)

It says it has done the animation but it never did and i require help.

1 Like

Your issue is that you are using offset instead of scale while tweening the frame’s size. The frame is being tweened, but it is too tiny of a movement to see, as your value is 0.5. If you were using scale, 0.5 would not be a tiny movement, however, offset would require larger numbers, as it works in a different way.

1 Like

what do you think i should do then? I could do UDim2.fromScale but that doesn’t work

local Main = script.Parent

for _, Label in pairs(Main:GetChildren()) do
	if Label:IsA("TextButton") then
		Label.MouseEnter:connect(function()
			Label.BackgroundTransparency = 0.75
			Label.Bar:TweenSize(UDim2.fromScale(0,0.5,0,50), "Out","Sine", 1, true)
		end)
		Label.MouseLeave:connect(function()
			Label.BackgroundTransparency = 1
			Label.Bar:TweenSize(UDim2.fromScale(0,0,0,50), "Out","Sine", 1, true)
		end)
	end
end

Simply just change the UDim2 values to: UDim2.new(1, 0, 0, 50) and UDim2.new(0, 0, 0, 50) for the right effect.

The .new method of UDim2 essentially combines 2 UDim’s to get the x and y values, UDim consists of a Scale value (scale * screen size) and an Offset value (in pixels). Therefore UDim2.new expects the following (X Scale, X Offset, Y Scale, Y Offset)

1 Like

SS4PPHIRE was right, a reason why your animation wasn’t working was because you we’re using Offset instead of scale. Also, when you use Anchor points. make sure they’re on the right side, for example, if your anchor point is on the left and you try to scale, you guys will get bigger on the right. If your anchor point is on the right then it will scale on the right. So if your anchor point is on the left and you make it scale to UDim2.new(1,0,1,0) then it will completely fill the box.

Here’s the file if you want it so you can take a look :smiley:

(Also I tweaked the animation to make it look more fast, you can change the duration if you want)

Animated UI(Fix).rbxl (23.8 KB)

Here’s how I would’ve done your UI:

Animated UI(My version).rbxl (23.9 KB)

3 Likes

do you have any other ideas which would work well with my ui?

also i want to make an animation when you click on a button and they all use the back effect and go off the screen and then there is a back button that comes into the screen. I also want the buttons to go off one by one with like a .5 second delay and come back on the screen with a .5 second delay. What would be the best way to do this?