Tweens Play At The Same Time? (Color Changing Tween)

Help and Feedback Scripting Support
, , ,
#1

  1. What do you want to achieve? Keep it simple and clear!
    I want to change the color of multiple parts by using gui buttons. Each button has a script that has different tween info that will change the color of the parts. I want to be able to click on the button so that it stops the current tweens in one script and plays the tweens in the script from the new gui button.

  2. What is the issue? Include screenshots / videos if possible!
    The issue is that when the tweens are playing from one script and click the button with the script that has new tweens, the old tweens do not stop. Instead all the tweens play at the same time and the parts begin to change colors between the tweens of both scripts.

  3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?
    I have considered checking when one button is pressed so that i can disable the script from the other button to stop its tweens but i dont think that works.

Here is the script from the “Blue” button.

local Button = script.Parent
local CollectionService = game:GetService("CollectionService")
local TweenService = game:GetService("TweenService")
local Info = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, -1, false, 0)

Button.MouseButton1Click:Connect(function()	
	for i,v in pairs(CollectionService:GetTagged("Mainstage Backdrop Lightbulb Lights Alternating Pattern Group 1")) do
		TweenService:Create(v, Info, {Color = Color3.new(0.333333, 0.333333, 1)}):Play()
		v.Material = Enum.Material.Neon	
	end
	task.wait(1)
	for i,v in pairs(CollectionService:GetTagged("Mainstage Backdrop Lightbulb Lights Alternating Pattern Group 2")) do
		TweenService:Create(v, Info, {Color = Color3.new(0.333333, 0.333333, 1)}):Play()
		v.Material = Enum.Material.Neon	
	end	
	task.wait(1)
end)

Button.MouseButton1Click:Connect(function()	
	for i,v in pairs(CollectionService:GetTagged("Mainstage Backdrop LED Lights Center Ring")) do
		TweenService:Create(v, Info, {Color = Color3.new(0.333333, 0.666667, 1)}):Play()
		v.Material = Enum.Material.Neon	
	end
	task.wait(.5)
	for i,v in pairs(CollectionService:GetTagged("Mainstage Backdrop LED Lights Middle Ring")) do
		TweenService:Create(v, Info, {Color = Color3.new(0.333333, 0.333333, 1)}):Play()
		v.Material = Enum.Material.Neon	
	end
	task.wait(.30)
	for i,v in pairs(CollectionService:GetTagged("Mainstage Backdrop LED Lights Outer Ring")) do
		TweenService:Create(v, Info, {Color = Color3.new(0.333333, 0, 1)}):Play()
		v.Material = Enum.Material.Neon	
	end
	task.wait(.55)
	print("Lights Color Changed")
end)

and here is the script for the “Fuscia” button which is the same thing just with different tween infos.

local Button = script.Parent
local CollectionService = game:GetService("CollectionService")
local TweenService = game:GetService("TweenService")
local Info = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, -1, true, 0)

Button.MouseButton1Click:Connect(function()
	for i,v in pairs(CollectionService:GetTagged("Mainstage Backdrop Lightbulb Lights Alternating Pattern Group 1")) do
		TweenService:Create(v, Info, {Color = Color3.new(1, 0, 1)}):Play()	
		v.Material = Enum.Material.Neon	
	end
	task.wait(1)
	for i,v in pairs(CollectionService:GetTagged("Mainstage Backdrop Lightbulb Lights Alternating Pattern Group 2")) do
		TweenService:Create(v, Info, {Color = Color3.new(1, 0, 1)}):Play()
		v.Material = Enum.Material.Neon	
	end	
	task.wait(1)
end)

Button.MouseButton1Click:Connect(function()	
	for i,v in pairs(CollectionService:GetTagged("Mainstage Backdrop LED Lights Center Ring")) do
		TweenService:Create(v, Info, {Color = Color3.new(1, 0.333333, 1)}):Play()
		v.Material = Enum.Material.Neon	
	end
	task.wait(.5)
	for i,v in pairs(CollectionService:GetTagged("Mainstage Backdrop LED Lights Middle Ring")) do
		TweenService:Create(v, Info, {Color = Color3.new(1, 0, 1)}):Play()
		v.Material = Enum.Material.Neon	
	end
	task.wait(.30)
	for i,v in pairs(CollectionService:GetTagged("Mainstage Backdrop LED Lights Outer Ring")) do
		TweenService:Create(v, Info, {Color = Color3.new(1, 0, 0.498039)}):Play()
		v.Material = Enum.Material.Neon	
	end
	task.wait(.55)
	print("Lights Color Changed") 
end)

If needed here is the explorer tab that shows where each button with their script is (ScreenGui is not mine, I am using/customizing a free one I found on YouTube just fyi)!
Screenshot 2024-04-23 202418

And here is a video showing how the colors begin to change simultaneously.

#2

I suggest you should handle everything with only 1 script, and not having one script per button.
All your buttons will call the same script which handle the tween, depending on the name or attribute of each button it will decide which color to use to change the parts.

When a tween starts, you reference it in a variable, when a new button is clicked, you look for that previous tween in the variable, stop it and start a new one with the new color

2 Likes
#3

Thanks! I believe I had them in one script before but split it thinking it would be easier. I did it before thinking about how to stop one tween to begin another so I will try to combine them in one script again and let you know how it goes!

1 Like
#4

Tbh, I have no idea if 2 tweens are playing at the same time cause the colors are confusing to me. Nevertheless, here’s how you can combine the two scripts so you can cancel the tweens:

  1. Have a table in which you store the current running tweens. (let’s call this A)
  2. Whenever a button is pressed, check the length of A which should be 0, this means you play your tweens normally, but every time you also store it into you table
local tween = TweenService:Create(v, Info, {Color = Color3.new(0.333333, 0.666667, 1)})
table.insert(A, tween)
tween:Play()
v.Material = Enum.Material.Neon
  1. Any subsequent presses will check for the length of A and find it’s more than 0, in which case it runs this loop first before creating new tweens:
for i, v in A do
   v:Cancel() -- stops the tween and values go to their original state
   table.remove(A, i)
end

Hope this helped you! :smile:

1 Like
#5

Thank you for the suggestion! I’m still confused, I don’t really know much about tables so I am not sure how this would look in my script? :sweat_smile: