Health bar Builboard Gui sliding in Tween

I’m trying to make a health bar that is over the shoulder of a player and I’m working on making a way for it to tween size. I have come into the problem that the bar that moves is sliding forward in the middle of a tween and cant get a consistent way for this to stop.

Here is the tweening script I currently have testing with where it moves the bar halfway down:

local size = 0.5

local TweenService = game:GetService("TweenService")

local TweenInf = TweenInfo.new(3, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut)

local goal1 = {Size = UDim2.new(size,0,1,0)}
local Tween1 = TweenService:Create(script.Parent.Background.Frame, TweenInf, goal1)

local goal2 = {Size = UDim2.new((1/size),0,1,0)}
local Tween2 = TweenService:Create(script.Parent.Background.Frame.Bar, TweenInf, goal2)

Tween1:Play()
Tween2:Play()

Here is my explorer layout (Frame has ClipsDescendants set to true):
image

Finally, here is the outcome:


As you can see the left side of the bar moves right a bit before moving back to its original position.
I obviously can’t use the Frames offset here due to how offset works in Billboard Guis, which makes doing this a lot more tricky.

If you need any more info I’d be glad to give you it in the replies!

Im not a ui designer but maybe try to set the anchor point to 0,5 and 0,5 ?

after messing around with the anchor points, everything gave pretty much the same result