Issue with tweening using a function for multiple buttons

Hello, I tried to make my code more flexible using functions and tweens as I want to tween a gui to another gui but my buttons have different positions. I made a function but I am not good with functions and still don’t quite understand them. Each button has 2 frames, one is just Indicator and the other is IndicatorEnd.

my code:

local Indicator

local function IndicatorTweens(ui)
	Indicator = ui.Indicator
	ui.MouseEnter:Connect(function()
		Indicator.Visible = true
		local tweenRot = TS:Create(Indicator, TweenInfo.new(0.3),{Rotation = 145})
		local Start_Pos = UDim2.new(Indicator.Position)
		local End_Pos = UDim2.new(ui.IndicatorEnd.Position)
		Indicator.Position = Start_Pos
		local tweenPos = Indicator:TweenPosition(End_Pos, Enum.EasingDirection.In, Enum.EasingStyle.Quad,0.21,true)
		tweenRot:Play()
	end)
	ui.MouseLeave:Connect(function()
		Indicator.Visible = false
		local tweenRot = TS:Create(Indicator, TweenInfo.new(0.3),{Rotation = 45})
		local Start_Pos = UDim2.new(ui.IndicatorEnd.Position)
		local End_Pos = UDim2.new(Indicator.Position)
		Indicator.Position = Start_Pos
		local tweenPos = Indicator:TweenPosition(End_Pos, Enum.EasingDirection.In, Enum.EasingStyle.Quad,0.21,true)
		tweenRot:Play()
	end)
end

IndicatorTweens()
1 Like

Hiwi!

Well your code is confusing me a little.
First, when you use the function IndicatorTweens() You are sending nothing to the function, but you are trying to receive an element you called “ui”.

Now, that ui element is empty, and you are placing ui.Indicator (which should be empty) into the local variable called Indicator, then local indicator is nil.

Then on mouse enter of ui element, which is empty, you used MouseEnter to connect a function. Inside that you created a local tweenRot with a tweenCreate.
and Created another TweenPosition, those 2 tweens at the same time that the mouse triggered the enter event.

Now you mention:

You mean, move a GUI to the position of another GUI?

What errors are you having in the Output? I guess the first one is the ui element which is nil, cause you didnt sent anything on the function when you call it

I only have 1 and that is attempt to index nil with ‘Indicator’. I want to use this function for 4 different buttons and each button contains 2 frames, one is the indicator (starting position for the frame) and the other is IndicatorEnd (ending position of the frame). When the mouse hovers over the textlabel, I want the Indicator to move to IndicatorEnd but I have multiple buttons which are positioned vertically. Each Indicator has a different position so I want to get the position of the indicator that is in use when you hover over a text label and move and rotate the indicator until it is in the position of IndicatorEnd for that text label.

image

Look.

local TS = game:GetService("TweenService")

-- The ScreenGui containing infinite frames if you wish
local allTheGuis = script.Parent

-- Main Function that works with ALL the guis inside
-- the ScreenGui
local function TweenAll(theGui)
	print(theGui)
	print(theGui.buttA.Position)
	print(theGui.buttB.Position)
	
	local goal = {}
	goal.Position = theGui.buttA.Position
    goal.Rotation = 145

	local mainTween = TS:Create(theGui.buttB, TweenInfo.new(2), goal)
	mainTween:Play()
end

-- Find all the GUIs with a loop, and connect them
-- to the Main TweenFunction
for _, g in pairs(allTheGuis:GetChildren()) do
	if g:IsA("Frame") then -- If the thing found is a Frame connect
		print(g)	
		g.MouseEnter:Connect(function(x,y)
			--print(x,y)
			TweenAll(g)
		end)
	end
end

That ScreenGui contains 3 frames, each frame has 2 buttons. Once the mouse enter the frame, the buttonB tweens to the position of buttonA.

image

On the script, First. Obtain all Gui elements inside the ScreenGui, use a loop to check and connect each one with the function that will handle the tweening. So you have infinite number of Guis using only 1 function.

EDIT:
By making some little adjustments, just “unTween” them
Very low res vid:
tween.wmv (1.7 MB)

1 Like

Hi. I made some changes and the code works. Start_Pos and End_Pos should be global from the events point of view, as they are references that should not change.

local function IndicatorTweens(uiLocal)
	local Indicator

	Indicator = uiLocal.Indicator
	local Start_Pos = Indicator.Position
	local End_Pos = uiLocal.IndicatorEnd.Position

	uiLocal.MouseEnter:Connect(function()
		Indicator.Visible = true
		local tweenRot = TS:Create(Indicator, TweenInfo.new(0.3),{Rotation = 145})
		--local Start_Pos = Indicator.Position
		--local End_Pos = ui.IndicatorEnd.Position
		--Indicator.Position = Start_Pos
		local tweenPos = Indicator:TweenPosition(End_Pos, Enum.EasingDirection.In, Enum.EasingStyle.Quad,0.21, true)
		tweenRot:Play()
	end)
	uiLocal.MouseLeave:Connect(function()
		local tweenRot = TS:Create(Indicator, TweenInfo.new(0.3),{Rotation = 45})
		--local Start_Pos = ui.IndicatorEnd.Position
		--local End_Pos = Indicator.Position
		--Indicator.Position = End_Pos
		local tweenPos = Indicator:TweenPosition(Start_Pos, Enum.EasingDirection.In, Enum.EasingStyle.Quad,0.21, true)
		tweenRot:Play()
		tweenRot.Completed:Wait()
		Indicator.Visible = false
	end)
end

IndicatorTweens(ui)

Have a nice day.

2 Likes