Stamina Indicator does not tween correctly

[DyzuOfficial (dyzu)]

You can write your topic however you want, but you need to answer these questions:

1. What do you want to achieve? I want it to retract downwards, not upwards.

2. What is the issue? I am reworking the stamina indicator for my climbing system, and I noticed that however I tween it, it sticks to the top when I retract its size.

3. What solutions have you tried so far? I looked for solutions on youtube, the developer forum, the documentation.

I have included the entire climb system, which includes the previous stamina system.

ClimbController.rbxm (14.4 KB)

The problem is located inside of the barmanager script, which is located in fill (There is two atm, the one that is important is inside of a canvasgroup, as I am trying to get this script to work before modifying the main climb controller for optimization, so I have some filler instances that are just there to hold values.)

This is the main tween code for those who do not want to download the RBXL.

local TweenService = game:GetService("TweenService")
local val = script.Parent.Parent.Parent.Fill.Value
local indicator = script.Parent

-- Set the anchor point to the top-center (0.5, 0), so the top stays fixed and the bottom moves down
indicator.AnchorPoint = Vector2.new(0.5, 0)
indicator.Position = UDim2.new(0.5, 0, 0, 0) -- Always anchored at the top

local function tweenStamina(newValue)
	local newSizeY = newValue / 100 -- Convert to scale (assuming value is between 0 and 100)

	-- Tween the size and keep the top anchored
	local tweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
	local targetSize = UDim2.new(1, 0, newSizeY, 0) -- Shrinking vertically
	local tween = TweenService:Create(indicator, tweenInfo, {Size = targetSize})

	tween:Play()
end

val.Changed:Connect(function()
	tweenStamina(val.Value)
end)

[VonsRevenges (Von)]

You added .Value to the variable, and called it again on the last line tweenStamina(val.Value), here I fixed the problem:

local TweenService = game:GetService("TweenService")
local val = script.Parent.Parent.Parent.Fill
local indicator = script.Parent

-- Set the anchor point to the top-center (0.5, 0), so the top stays fixed and the bottom moves down
indicator.AnchorPoint = Vector2.new(0.5, 0)
indicator.Position = UDim2.new(0.5, 0, 0, 0) -- Always anchored at the top

local function tweenStamina(newValue)
	local newSizeY = newValue / 100 -- Convert to scale (assuming value is between 0 and 100)

	-- Tween the size and keep the top anchored
	local tweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
	local targetSize = UDim2.new(1, 0, newSizeY, 0) -- Shrinking vertically
	local tween = TweenService:Create(indicator, tweenInfo, {Size = targetSize})

	tween:Play()
end

val:GetPropertyChangedSignal("Value"):Connect(function()
	tweenStamina(val.Value)
end)

[DyzuOfficial (dyzu)]

This does not fix it, just makes it really skinny and it does not move at all now.

Before it would work perfectly, it would just end up retracting upwards

For example

| # |
| # |
| |

I want it to be like

| |
|#|
|#|

[VonsRevenges (Von)]

Can you show me how do you want the UI to work through video/image?

[DyzuOfficial (dyzu)]

I apologize for not supplying that.

I realized that it is an issue with the GUI and not my code though, and I fixed it by myself.