How can I Tween GUI Colors?

Help and Feedback Scripting Support
#1

I’ve been trying to figure out how to tween GUI Colors for the past few days and shortened down to this script.

local GUI = script.Parent 
local tweenService = game:GetService("TweenService") 
local tweenInfo = TweenInfo.new(
	1, -- time in seconds for tween
	Enum.EasingStyle.Sine, -- tweening style
	Enum.EasingDirection.Out, -- tweening direction
	0, -- times to repeat (when less than zero the tween will loop indefinitely)
	false, -- reverses
	0 -- delay time
)

local IsEnabled = script.Parent.Parent.IsEnabled

local Colors = {
	Color3.fromRGB(76, 255, 56);
	Color3.fromRGB(255, 76, 79);
}

script.Parent.MouseButton1Click:Connect(function()
	if IsEnabled == false then
		local property = {Color = Colors[1]} -- property name and property value (be sure to place in table)
		local tween = tweenService:Create(GUI, tweenInfo, property)
		IsEnabled.Value = true
		tween:Play() -- plays tween		
	else
		local property = {BackgroundColor = Colors[2]} -- property name and property value (be sure to place in table)
		local tween = tweenService:Create(GUI, tweenInfo, property)
		IsEnabled.Value = false
		tween:Play() -- plays tween		
	end
end)


-- red: 255, 76, 79
-- green: 76, 255, 56

The isEnabled is a BooleanValue I put in the GUI to track if the setting is off or on.

The current error I’m getting is this - TweenService:Create property named 'BackgroundColor' cannot be tweened due to type mismatch (property is a 'int', but given type is 'Color3') .

#2

The property is called BackgroundColor3 try renaming it.

local property = {BackgroundColor3 = Colors[1]}
local property = {BackgroundColor3 = Colors[2]}

Edit: I noticed that you have an object called IsEnabled and created a variable for it but in your MouseButton1Click function you’re trying to compare an object to a boolean value?

1 Like
#3

Yes, if it is not a proper property then it wouldn’t tween. Remember attention to detail!

#4

That is what I did before and I thought it would work then but it didn’t. I tried it again like you told me but it still doesn’t work and doesn’t pull up any errors this time.

Also the isEnabled is a Boolean Value I named, like I said that I can change between false/true to track if the user already has the setting enabled so it can change into the right color. So right now I’m comparing a Boolean to another Boolean.

#5

You need to type IsEnabled.Value not IsEnabled if you do then you’re just comparing an object and a boolean value

1 Like
#6

Just a minor mistake I didn’t see, It works perfectly now thanks!