GUI Size and Position Tween not working as intended

As displayed in the video below, I’m trying to achieve a GUI Tween to showcase a cooldown of an ability, where in it would ideally not move position but just scale downwards.

I have it so it tweens the position of the frame along with tweening the size but its still not perfect and slightly shifts away anyway. Below I’ve listed the code that I’m using for the Tween, not sure if I’ve done something wrong or should approach creating this effect differently.

local BladeCooldownTween = TweenService:Create(Abilities.CooldownBar, TweenInfo.new(12), {Size = UDim2.new(0, 135, 0, 0), Position = UDim2.new(0.893, 0, 0.597, 0)})

All help is appreciated

There is a property called AnchorPoint, which helps you align the position with the scale correctly. Set it to (0, 1), so you don’t need to re-position the frame with the tween service.

Abilities.CooldownBar.AnchorPoint = Vector2.new(0, 1)

local BladeCooldownTween = TweenService:Create(Abilities.CooldownBar, TweenInfo.new(12), {Size = UDim2.new(0, 135, 0, 0)})
BladeCooldownTween:Play()

Increase the y-scale unit of the position by 1 as well.

1 Like