Scripting HelpersARCHIVE
A little piece of Roblox history. Preserved for everyone, one question at a time.Read about the archive →
✓ ANSWER ACCEPTED

Why does my Animation goes out of the screen more you click the Button?

Where it is or where I have it game.StarterGui.ScreenGui.Frame & game.StarterGui.ScreenGui.TextButton.Script

The TextButton.Text.Value = Menu

Test Place: www.roblox.com/games/658003394/Open-Close-Animation-Gui-Test-Place

The Script: (Normal)

debounce = false

script.Parent.MouseButton1Click:connect(function()
	if not debounce then
		debounce = true
		if script.Parent.Text == "Menu" then
			-- Open function
			script.Parent.Parent.Frame.Visible = true
			for i = 1,25 do
				script.Parent.Parent.Frame.Size = script.Parent.Parent.Frame.Size + UDim2.new(0.02,0,0,0)
				wait()
			end
			for i = 1,8 do
				script.Parent.Parent.Frame.Position = script.Parent.Parent.Frame.Position - UDim2.new(0,0,0,0)
				wait()
			end
			for i = 1,20 do
				script.Parent.Parent.Frame.Size = script.Parent.Parent.Frame.Size + UDim2.new(0,0,0.0225,0)
				wait()
			end
			script.Parent.Text = "Close"
		else
			--Close function
			for i = 1,25 do
				script.Parent.Parent.Frame.Size = script.Parent.Parent.Frame.Size - UDim2.new(0,0,0.02,0)
				wait()
			end
			for i = 1,8 do
				script.Parent.Parent.Frame.Position = script.Parent.Parent.Frame.Position + UDim2.new(0,0,0,0)
				wait()
			end
			for i = 1,20 do
				script.Parent.Parent.Frame.Size = script.Parent.Parent.Frame.Size - UDim2.new(0.0225,0,0,0)
				wait()
			end
			script.Parent.Parent.Frame.Visible = false
			script.Parent.Text = "Menu"
		end
		debounce = false
	end				
end)

1 comment

0

Hm

1 answer

✓ Accepted answer

Hi, I can see you've done a lot of number crunching to create your GUI, but there is a much simpler way to move GUI's or resize them without using a for loop.

Here's an example of a script I created that moves a GUI from off screen to on screen.

button = script.Parent
shop = button.Parent.Shop
open=false

button.MouseButton1Click:Connect(function()
	if not open then
		open=true
		shop:TweenPosition(UDim2.new(0.5,-250,0.5,-100),"Out","Quad",1)
	else
		open=false
		shop:TweenPosition(UDim2.new(0.5,-250,-0.5,-100),"Out","Quad",1)
	end
end)

If you'll notice, instead of using for loops to change the position, I use a cool API called TweenPoisition(). What it does is essentially animate the GUI from where it is to where you give the UDim2.new() position.

Let's say I had a GUI sitting of screen so it's location was (-0.5,0,0,0) and I wanted to move it into view for the player to see. The first step would be to define what the GUI is that you're moving. In my case it's a frame titled Shop.

shop:TweenPosition()

Next you want to give the location that you want it to take the GUI to.

shop:TweenPosition(UDim2.new(-0.5,0,0,0))

That's not all though. We can also set the styles of the wait the GUI eases in our out, or both. As well as setting the EasingStyle for how it'll look sliding. I like to pick Quad for this one. (Here is an animated list Roblox made of all the different easing styles.)

shop:TweenPosition(UDim2.new(-0.5,0,0,0),"Out,","Quad")

You can also set how long it takes for the animation to float to the end point. It's default is one second.

shop:TweenPosition(UDim2.new(-0.5,0,0,0),"Out,","Quad",1)

You can also use TweenSize() to tween the size instead or do both position and size with TweenSizeAndPosition()

You can read more about Tweening on the wiki page here.

This discussion is preserved as it was. New answers, comments, and votes are closed.