Health Bar Animation Problem

--animates health bar when you take damage/heal



local char = game.Players.LocalPlayer.Character

local oldHealth = char:WaitForChild("Humanoid").Health

local healthBar = script.Parent.healthBar
local damageBar = script.Parent.damageBar



char.Humanoid:GetPropertyChangedSignal("Health"):Connect(function() --detects when health changes
	
	if char.Humanoid.Health < oldHealth then --if you took damage,
		
		--change size of health bar
		healthBar.Size = UDim2.new(char.Humanoid.Health/char.Humanoid.MaxHealth, 0, 0, 25)
		
		
		--tween damage bar to size of health bar to give cool effect
		damageBar:TweenSize(healthBar.Size, Enum.EasingDirection.Out, Enum.EasingStyle.Cubic, .5)
		
		
	elseif char.Humanoid.Health > oldHealth then --if you healed,
		
		--color damage bar green and tween it to new location
		damageBar.BackgroundColor3 = Color3.new(0, 0.333333, 0)
		local tween = damageBar:TweenSize(UDim2.new(char.Humanoid.Health/char.Humanoid.MaxHealth, 0, 0, 25), Enum.EasingDirection.Out, Enum.EasingStyle.Cubic, .5)
		
		
		--wait until tween is done, resize health bar accordingly and make damage bar yellow again
		while damageBar.Size ~= UDim2.new(char.Humanoid.Health/char.Humanoid.MaxHealth, 0, 0, 25) do
			wait()
		end
		healthBar.Size = damageBar.Size
		damageBar.BackgroundColor3 = Color3.new(1, 0.666667, 0)
		
	end
	
	oldHealth = char.Humanoid.Health
	
end)

I don’t know why, but this isn’t working. The healing thing is a bit weird, I can’t even describe what’s going on here.
The tweening of the damage bar, however, isn’t working at all. And I do not know why.
The health bar on the other hand is working, it’s resizing and everything.

NOTE: The effect I’m trying to make is similar to what happens to your health bar in Elden Ring, or I think any souls game

I found out why: TweenSize / TweenPosition / TweenSizeAndPosition are probably kinda wonky with other EasingStyles (Cubic doesn’t work, and probably does Exponential).

You have two choices then:

  1. Use Enum.EasingStyle.Sine or Enum.EasingStyle.Linear or other styles that still apparently work with the tween functions, or…
  2. Use TweenService instead. A little more complicated, but gives you more control over what other properties you want tweened (Colors, AnchorPoints, Positions, CFrame, Rotations, etc.)

I have fixed the problem on your code + a few fixes:

--animates health bar when you take damage/heal

local char = game.Players.LocalPlayer.Character

local oldHealth = char:WaitForChild("Humanoid").Health

local healthBar = script.Parent.healthBar
local damageBar = script.Parent.damageBar

char.Humanoid:GetPropertyChangedSignal("Health"):Connect(function() --detects when health changes
	if char.Humanoid.Health < oldHealth then --if you took damage,
		--change size of health bar
		healthBar.Size = UDim2.new(char.Humanoid.Health/char.Humanoid.MaxHealth, 0, 0, 25)

		--tween damage bar to size of health bar to give cool effect
		damageBar:TweenSize(healthBar.Size, Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 0.5, true)
		
		print("Damage")
	elseif char.Humanoid.Health > oldHealth then --if you healed,
		--color damage bar green and tween it to new location
		damageBar.BackgroundColor3 = Color3.new(0, 0.333333, 0)
		
		--set this function as callback for TweenSize(). this will resize health bar accordingly and make damage bar yellow again
		local tweenEnd = function(completed) --states whether the tween played successfully or was cancelled by another tween
			--change the behavior here if you don't like it
			if completed then
				healthBar.Size = damageBar.Size
				damageBar.BackgroundColor3 = Color3.new(1, 0.666667, 0)
			end
		end
		
		--tween the damageBar, and use tweenEnd() as callback.
		damageBar:TweenSize(UDim2.new(char.Humanoid.Health/char.Humanoid.MaxHealth, 0, 0, 25), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 0.5, true, tweenEnd)
		print("Heal")
	end

	oldHealth = char.Humanoid.Health
end)

All UI Tween functions:
https://developer.roblox.com/en-us/api-reference/function/GuiObject/TweenSize
https://developer.roblox.com/en-us/api-reference/function/GuiObject/TweenPosition
https://developer.roblox.com/en-us/api-reference/function/GuiObject/TweenSizeAndPosition

TweenService and TweenInfo:
https://developer.roblox.com/en-us/api-reference/class/TweenService
https://developer.roblox.com/en-us/api-reference/datatype/TweenInfo

thanks, ill try this soon (i havent been online all day lol)

why wouldnt those two easing styles work well with tweensize?

I’m not sure why many easing styles won’t work with the Tween funcs of GUIs. It’s been like that for a long time.