Hello! I was wondering how to make a menu that drops down or to the right or something in that matter. Here’s an example of what I mean.
when you press this
this slides down
thank you!
2 Likes
You’re looking for GUI tweening.
1 Like
Use tweening. Many tutorials out there. I dont know the exact script, but if you dont know how to script, I can definitely do it for you eventually
1 Like
Read this article.
UI Animations
uiObject:TweenPosition(newPosition,directionEnum,styleEnum,durationOfTween)
1 Like
use :TweenPosition to tween the gui’s position
example (script was wrong, so i had to change it):
local button = --the location of your button
local gui = --the location of the gui that will close
button.MouseButton1Click:Connect(function()
gui:TweenPosition(UDim2.new(position), Enum.EasingDirection.In, Enum.EasingStyle.Back, 1)
end)
1 Like
I’m very new to scripting, so that would be great, Thank you so much!
Thank you so much! I’ll try that right now!
Edit: What would I input for the (X, Y)?
1 Like
Ahh, I see! Thank you so much! I’ll try that right now along to the other ones!
Ohh thats what its callleddddd! thank you so much! ill try searching for a tutorial
1 Like
for the (X, Y), just copy and paste the end position you want for the ui
Edit: i just realized my script tweened the button’s position, sorry!
here’s the new script:
local button = --the location of your button
local gui = --the location of the gui that will close
button.MouseButton1Click:Connect(function()
gui:TweenPosition(UDim2.new(position), Enum.EasingDirection.In, Enum.EasingStyle.Back, 1)
end)
1 Like
Thank you so much! You dont know how much i appreciate this!
Ok, so I’m going to cover mainly what you can do here:
- Usage of
TweenService
TweenService could give you more Variety with your GUI, Unlike TweenPosition and TweenSize, it is Universal with GUI, and Parts.
You can also change the Rotation of your UI which they cannot, making it a generally usful tool, but you can still stick to TweenPosition and TweenSize for simplicity.
A Generally unknown with TweenPosition and TweenSize is that you can assign a function() at the very end to indicate when the Tween Is Complete, but with TweenService, you have to create an entirely new Event for this purpose:
:TweenPosition(UDim2, EasingDirection, EasingStyle, Time, Override, function()
print("Completed") -- fires when Tween is Completed
end)
Tween.Completed:Connect(function()
print("Completed") -- fires when Tween is Completed
end)
- Usage of another function for
UDim2
Another thing is that you are only using the Scale, you should be using UDim2.fromScale, Unlike UDim2.new, it will only accept 2 Arguments instead of 4 Arguments:
UDim2.new(1,0,1,0) -- Applies all
UDim2.fromScale(1,1) -- Applies Scale
UDim2.fromOffset(0,0) -- Applies Offset
@the_sus7 's code and statement would be an incorrect usage of UDim2.new as he is only applying numbers on the XScale and XOffset and not XScale and YScale. you can shorten Enum.EasingDirection.In to just "In" and Enum.EasingStyle.Back to just "Back" which are valid with these two functions.
gui:TweenPosition(UDim2.new(position), Enum.EasingDirection.In, Enum.EasingStyle.Back, 1)
-- simplified:
gui:TweenPosition(UDim2.fromScale(position), "In", "Back", 1)
- Usage of
ClipDescendantsorCanvasGroups
You are able to useClipDescendantsorCanvasGroupsto Hide the UI from appearing outside a Frame.
2 Likes
@xGOA7x Thank you so very much for the in depth details! I would just like to ask on how I could do this:
:TweenPosition(UDim2, EasingDirection, EasingStyle, Time, Override, function()
print("Completed") -- fires when Tween is Completed
end)
Tween.Completed:Connect(function()
print("Completed") -- fires when Tween is Completed
end)
With the code I have currently If you wouldn’t mind:
local button = script.Parent
local gui = script.Parent.Parent
button.MouseButton1Click:Connect(function()
gui:TweenPosition(UDim2.fromScale(0.5,1.085), "In", "Back", 1) --reg pos {0.5, 0},{0.918, 0} done pos {0.5, 0},{1.085, 0}
end)
- I want to check if the Frame is done with the Animation, then flip the arrow 180°, making it able to be brought up again.
Thank you, -8ntlers!
you can do:
local TweenSvc = game:GetService("TweenService")
button.Activated:Connect(function()
gui:TweenPosition(UDim2.fromScale(0.5,1.085), "In", "Back", 1, function()
TweenSvc:Create(gui, TweenInfo.new(1), {Rotation = 180}):Play()
end)
end)
1 Like
Hm, it says
Unable to cast Function to bool
local button = script.Parent
local gui = script.Parent.Parent
local TweenSvc = game:GetService("TweenService")
button.Activated:Connect(function()
gui:TweenPosition(UDim2.fromScale(0.5,1.085), "In", "Back", 1, function() --reg pos {0.5, 0},{0.918, 0} done pos {0.5, 0},{1.085, 0}
TweenSvc:Create(gui, TweenInfo.new(1), {Rotation = 180}):Play()
end)
end)
Let me know if I did something wrong if you don’t mind, as I’m very new to scripting. Thank you so so so so sososoos much!
ah, I forgot to add the Override Variable
gui:TweenPosition(UDim2.fromScale(0.5,1.085), "In", "Back", 1, false, function() --reg pos {0.5, 0},{0.918, 0} done pos {0.5, 0},{1.085, 0}
TweenSvc:Create(gui, TweenInfo.new(1), {Rotation = 180}):Play()
end)
Ok, try now
1 Like
Thank you! it works! and im so sorry for keeping this going, but i’d like to know how to do something to mark that the arrow can be pressed again after the arrow turns 180 degrees for example spawning a part in the workspace, so when i want to reclick the button when its facing upwards to make the ui go back up, i can check if the part is in the workspace or something like that, thank you!
1 Like
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.