GUI Colour Tweening not working

Hello!

I am trying to make a script which smoothly tweens the background colour of the UI when the player is hovering over a button, and tweens back to the original colour when the player stop hovering over it.

Here’s the script I’ve made:

local btn = script.Parent
local isHovering = false
local tweenService = game:GetService("TweenService")
local tween = tweenService:Create(btn.Parent, TweenInfo.new(1), {BackgroundColor = Color3.fromRGB(170, 170, 170)})
local tween2 = tweenService:Create(btn.Parent, TweenInfo.new(1), {BackgroundColor = Color3.fromRGB(29,29,29)})

btn.MouseEnter:Connect(function()
	
	isHovering = true
	btn:TweenSize(UDim2.new(0.45, 0,0.12, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.2, true)
	tween:Play()
end)

btn.MouseLeave:Connect(function()
	
	isHovering = false
	btn:TweenSize(UDim2.new(0.407, 0,0.096, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.2, true)
	tween2:Play()
end)

btn.MouseButton1Down:Connect(function()
	
	btn:TweenSize(UDim2.new(0.35, 0,0.085, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.2, true)
end)

btn.MouseButton1Up:Connect(function()
	
	if not isHovering then 
		btn:TweenSize(UDim2.new(0.407, 0,0.096, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.2, true)
		tween2:Play()
	else
		btn:TweenSize(UDim2.new(0.45, 0,0.12, 0), Enum.EasingDirection.InOut, Enum.EasingStyle.Quint, 0.2, true)
		tween:Play()
	end
end)

I’ve been using the same script in other UI buttons, without the colour tween, which have worked but for some reason this script doesn’t work.

Here’s the error:

I don’t really understand the error so if anyone can help much would be appreciated!

You need to tween BackgroundColor3, not BackgroundColor

To fix this, replace local tween and local tween2 with:

local tween = tweenService:Create(btn.Parent, TweenInfo.new(1), {BackgroundColor3 = Color3.fromRGB(170, 170, 170)})
local tween2 = tweenService:Create(btn.Parent, TweenInfo.new(1), {BackgroundColor3 = Color3.fromRGB(29,29,29)})
1 Like

Tween BackgroundColor3 becsuse thats a Color3 value unlike the BrickColor value BackgroundColor

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.