How to animated a page GUI

Help and Feedback Scripting Support
#1

Im working on my game still and I’m making this teleport screen here which is paged. Basically you use the arrows at the bottom to select what page you want to go so you can find the right place. As you see in this video, the page scrolling just goes left and right

Heres my script that makes the process work

local nextButton = script.Parent:WaitForChild("NextButton")
local prevButton = script.Parent:WaitForChild("BackButton")

local WesternEurope1Buttons = script.Parent:WaitForChild("WestEu1")
local WesternEurope2Buttons = script.Parent:WaitForChild("WestEu2")

local titleText = script.Parent:WaitForChild("rb")
titleText.Text = "WESTERN EUROPE 1"

function NextOnClicked()
	if WesternEurope1Buttons.Visible == true then
		WesternEurope1Buttons.Visible = false
		WesternEurope2Buttons.Visible = true
		titleText.Text = "WESTERN EUROPE 2"
	end
end

function BackOnClicked()
	if WesternEurope2Buttons.Visible == true then
		WesternEurope2Buttons.Visible = false
		WesternEurope1Buttons.Visible = true
		titleText.Text = "WESTERN EUROPE 1"
	end
end

nextButton.MouseButton1Click:Connect(NextOnClicked)
prevButton.MouseButton1Click:Connect(BackOnClicked)

What I want happening is when the next or back buttons are clicked at the bottom each of those buttons you see slide to the left or right at different rates.

So how can I achieve this?

1 Like
#2
#3

Heres an example to the new script that I wrote

-- AUTHOR: TheUltimateLifeFormU
-- NAME: UIMainControl.lua
-- DATE: 12 February, 2024

-- VARIABLES
local TweenServ = game:GetService("TweenService")
local nextButton = script.Parent:WaitForChild("NextButton")
local prevButton = script.Parent:WaitForChild("BackButton")
local WesternEurope1Buttons = script.Parent:WaitForChild("WestEu1")
local WesternEurope2Buttons = script.Parent:WaitForChild("WestEu2")

local titleText = script.Parent:WaitForChild("rb")
titleText.Text = "WESTERN EUROPE 1"

-- MAIN CODE

-- Some basic functions to get the goofy UI working
function NextOnClicked()
	if WesternEurope1Buttons.Visible == true then
		WesternEurope1Buttons.Visible = false
		WesternEurope2Buttons.Visible = true
		titleText.Text = "WESTERN EUROPE 2"
	end
end

function BackOnClicked()
	if WesternEurope2Buttons.Visible == true then
		WesternEurope2Buttons.Visible = false
		WesternEurope1Buttons.Visible = true
		titleText.Text = "WESTERN EUROPE 1"
	end
end

-- Some tweening functions here just for me to switch between
-- functions below these comments
Offset1 = "{1, 0},{0, 0}"
Offset2 = "{-1, 0},{0, 0}"
OffsetReset = "{0, 0},{0, 0}"

function TweenNextClicked()
	local tweeInfo = TweenInfo.new(
		2, 
		Enum.EasingStyle.Back,
		Enum.EasingDirection.In, 
		-1,
		true,
		0
		
	)
	
	local tweenwd = TweenServ:Create(WesternEurope1Buttons, tweeInfo, Offset2)
	
end

nextButton.MouseButton1Click:Connect(NextOnClicked)
prevButton.MouseButton1Click:Connect(BackOnClicked)

Is this good enough

#4

Looks good, you gotta test it to see if it fits with your likings. Experiment with different EasingStyles, EasingDirections, time etc.

Also, don’t forget to put :Play() at the end of the tween you’ve created. I always happen to forget that as an UI designer.

#5

Btw, in your subtext where it says if it makes a buzz sound blablabla, you wrote ‘abailable’ instead of available. Lil typo on your end! :wink: