Healthbar position gets messed up?

[obamagremlin (jayp)]

Trying to make a custom healthbar, but its position gets messed up when the health changes

local Players = game:GetService("Players")
local localPlayer = Players.LocalPlayer
local character = localPlayer.Character or localPlayer.CharacterAdded:Wait()
local humanoid = character:WaitForChild("Humanoid")

function resizeCustomLoadingBar(sizeRatio, clipping, top)
	clipping.Size = UDim2.new(clipping.Size.X.Scale, clipping.Size.X.Offset, sizeRatio, clipping.Size.Y.Offset)
	clipping.Position = UDim2.new(clipping.Position.X.Scale, clipping.Position.X.Offset, 1 - sizeRatio, clipping.Position.Y.Offset)
	top.Size = UDim2.new(top.Size.X.Scale, top.Size.X.Offset, 1, top.Size.Y.Offset)
end

function changed()
	local healthRatio = humanoid.Health / humanoid.MaxHealth
	resizeCustomLoadingBar(healthRatio, script.Parent.Parent, script.Parent)
end

humanoid:GetPropertyChangedSignal("Health"):Connect(changed)

health is at 50% currently (text doesnt update yet)

[JAcoboiskaka1121 (Skellyton)]

Try using a canvas group to limit the green parts’ boundaries. Im not sure how else you can limit the green part or scale it down.

Also you should be dividing the Green GUI by the players health, not their max health.

EDIT:
The formula should be:

Healthbar Size * (Health / MaxHealth)

[ProtectpocketAgain (Pocket)]

Maybe could mess with zindex and covering it with a frame, although I’m not sure if that’s work

[obamagremlin (jayp)]

Solved, its a little bit to explain so send dm if u want solve