How do i make a hide and show gui button with animations?

Help and Feedback Scripting Support
#1

so, i got a button and when u press it a gui smoothly goes off screen, but how do i make it so when its pressed for a second time then it smoothly comes back to the screen, i dont mean like a simple script.parent.mb1click function that makes gui visible and invisible, i mean with animations, heres my script:

local shop = script.Parent.Parent.Shop

script.Parent.MouseButton1Click:Connect(function()
shop:TweenPosition(UDim2.new(0, -90, 0.379, 0), “Out”, “Sine”, 1.5)
end)

3 Likes
#2

ngl This feels like your asking me to a free script comission

local UserInputService = game:GetService("UserInputService")
local TweenService = game:GetService("TweenService")

-- Reference to the GUI to be animated
local gui = script.Parent.ScreenGui -- Replace "ScreenGui" with the actual name of your GUI

-- Variables to track GUI state and animation
local isGuiVisible = false
local isAnimating = false

-- Define the properties for showing and hiding the GUI
local showProperties = {
    Position = UDim2.new(0, 0, 0, 0), -- Set to the desired on-screen position
    AnchorPoint = Vector2.new(0, 0),
}

local hideProperties = {
    Position = UDim2.new(1, 0, 0, 0), -- Move off-screen to the right
    AnchorPoint = Vector2.new(1, 0),
}

-- Function to toggle the GUI visibility with animations
local function toggleGUI()
    if isAnimating then
        return
    end

    isAnimating = true

    local properties
    if isGuiVisible then
        properties = hideProperties
    else
        properties = showProperties
    end

    local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)

    local tween = TweenService:Create(gui, tweenInfo, properties)
    tween:Play()

    tween.Completed:Connect(function()
        isGuiVisible = not isGuiVisible
        isAnimating = false
    end)
end

-- Connect the button to the toggle function
local button = script.Parent -- Change this to the path of your button
button.MouseButton1Click:Connect(toggleGUI)

btw this script toggles the GUI’s visibility with smooth animations when the button is clicked. It prevents multiple animations from occurring simultaneously by checking the isAnimating flag.

I haven’t checked if the script works but i hope it does im not really with my comuter rn and pls stop asking for free comissions :)))

3 Likes
#3

oh lord i really thought it was gonna be simpler sorry about that, i didnt mean to ask for free commisions i expected like a 20 line piece of code, tysm though

1 Like
#4

its ok And Good luck on scripting

3 Likes
#5

thanks bro, ill credit u in the game when i use this

2 Likes
#6

This topic already has a solution, but I think there is a much simpler way of executing the tweens:

local button = script.Parent
local shop = script.Parent.Parent.Shop

local ts = game:GetService("TweenService")
local ti = TweenInfo.new(1.5, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)

local clicked = false

button.MouseButton1Click:Connect(function()
    if clicked == false then
        clicked = true

        ts:Create(shop, ti, {Position = UDim2.new(0, -90, 0.379, 0)}):Play()
    else -- If clicked is true (which means the button has already been clicked once), clicking a 2nd time results in the shop moving back to its original position.
        clicked = false
        
        ts:Create(shop, ti, {Position = UDim2.new(0, 0, 0, 0)}):Play() -- Paste your original position of shop here
    end
end)
5 Likes
#7

that makes alot more sense now thanks lol, the one at the top was a bit confusing

2 Likes
#8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.