How To Make an ADVANCED GUI | Roblox Studio Lite
Want to make am advanced gui in Studio Lite / Roblox Studio? Then watch To the end!
SCRIPTS!!
___________
Script 1-
--Made by DevTutorials ;D please subscribe!!!
-- Toggle frame with smooth center grow/shrink animation
local TweenService = game:GetService("TweenService")
local button = script.Parent -- LocalScript inside your TextButton or ImageButton
local targetFrame = script.Parent.Parent:WaitForChild("TargetFrame") -- CHANGE THIS TO YOUR FRAME NAME
-- SETTINGS
local animationTime = 1 -- seconds
local easingOpen = Enum.EasingStyle.Quad
local easingClose = Enum.EasingStyle.Quad
-- Make frame scale from center
targetFrame.AnchorPoint = Vector2.new(0.5, 0.5)
-- Reposition after setting AnchorPoint so it's centered where you want it
-- Store original size and hidden size
local originalSize = targetFrame.Size
local hiddenSize = UDim2.new(0, 0, 0, 0)
-- Start hidden
targetFrame.Visible = false
targetFrame.Size = hiddenSize
local isOpen = false
local function tweenFrame(size, style, direction)
TweenService:Create(
targetFrame,
TweenInfo.new(animationTime, style, direction),
{Size = size}
):Play()
end
button.MouseButton1Click:Connect(function()
isOpen = not isOpen
if isOpen then
targetFrame.Visible = true
tweenFrame(originalSize, easingOpen, Enum.EasingDirection.Out)
else
local shrinkTween = TweenService:Create(
targetFrame,
TweenInfo.new(animationTime, easingClose, Enum.EasingDirection.In),
{Size = hiddenSize}
)
shrinkTween:Play()
shrinkTween.Completed:Wait()
targetFrame.Visible = false
end
end)
SCRIPT 2
_________
--Made by DevTutorials ;D please subscribe!!!
-- Smooth hover and click pop animation using UIScale (bouncy version)
local button = script.Parent -- LocalScript inside your TextButton or ImageButton
local TweenService = game:GetService("TweenService")
-- SETTINGS
local hoverScale = 1.1 -- Bigger on hover
local clickScale = 1.15 -- Bigger on click
local tweenTime = 0.15 -- Animation speed
local clickSoundId = "rbxassetid://12345678" -- Replace with your sound ID
-- Add UIScale if it doesn't exist
local uiScale = button:FindFirstChildOfClass("UIScale")
if not uiScale then
uiScale = Instance.new("UIScale")
uiScale.Scale = 1
uiScale.Parent = button
end
-- Create click sound
local clickSound = Instance.new("Sound")
clickSound.SoundId = clickSoundId
clickSound.Parent = button
-- Tween helper for UIScale (bouncy)
local function tweenScale(scale)
TweenService:Create(
uiScale,
TweenInfo.new(
tweenTime,
Enum.EasingStyle.Back, -- Back easing = bouncy
Enum.EasingDirection.Out
),
{Scale = scale}
):Play()
end
-- Hover in
button.MouseEnter:Connect(function()
tweenScale(hoverScale)
end)
-- Hover out
button.MouseLeave:Connect(function()
tweenScale(1)
end)
-- Click
button.MouseButton1Click:Connect(function()
tweenScale(clickScale)
clickSound:Play()
task.wait(0.1)
tweenScale(1)
end)
Tags
_________
#roblox #robloxstudio #studiolite #robloxtutorial