GUI Open up Animation/Close Animation

Help and Feedback Scripting Support
, ,
#1

Hello, I need support on making an animation for a GUI by making the GUI open up/close when the player presses a specific key. The animation is shown in the video below but I am confused as to how I can recreate the animation. I am aware it will most likely be using TweenPosition / TweenSize but don’t know how to use them in this scenario.
https://gyazo.com/4ab1f9a3d324b5d4e14ddddaf6469ca6

#2

Just create a GuiObject and put the Gui inside of it and use :TweenSize

local UserInputService = game:GetService("UserInputService")

local KEYCODE = Enum.KeyCode.Z

local frame: Frame = script.Parent --the path to frame
local frameShown = false

local function onInputBegan(input, processed)
    if processed then
        return
    end

    if not input.KeyCode == KEYCODE then
        return
    end

    frameShown = not frameShown
    if frameShown then
        frame:TweenSize(UDim2.fromScale(1, 1), Enum.EasingDirection.Out, Enum.EasingStyle.Exponential, 0.5)
    else
        frame:TweenSize(UDim2.fromScale(0, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Exponential, 0.5)
    end
end

UserInputService.InputBegan:Connect(onInputBegan)
#3

The frame just disappers when it does the animation

#4

I was too tired, the code I made is wrong. Please use the corrected code.

local UserInputService = game:GetService("UserInputService")

local KEYCODE = Enum.KeyCode.Z

local frame: Frame = script.Parent --the path to frame
local frameShown = false

local function onInputBegan(input, processed)
    if processed then
        return
    end

    if input.KeyCode ~= KEYCODE then
        return
    end

    frameShown = not frameShown
    if frameShown then
        frame:TweenSize(UDim2.fromScale(1, 1), Enum.EasingDirection.Out, Enum.EasingStyle.Exponential, 0.5)
    else
        frame:TweenSize(UDim2.fromScale(0, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Exponential, 0.5)
    end
end

UserInputService.InputBegan:Connect(onInputBegan)
#5

Isn’t that the same code? Still just makes the Frame disappear.

#6

eh might have to do with the Size of the frame you’re using. This should account for all sizes.

local UserInputService = game:GetService("UserInputService")

local KEYCODE = Enum.KeyCode.Z

local frame: Frame = script.Parent --the path to frame
local frameSize = frame.Size
local frameShown = false

local function onInputBegan(input, processed)
    if processed then
        return
    end

    if input.KeyCode ~= KEYCODE then
        return
    end

    frameShown = not frameShown
    if frameShown then
        frame:TweenSize(frameSize, Enum.EasingDirection.Out, Enum.EasingStyle.Exponential, 0.5, true)
    else
        frame:TweenSize(UDim2.fromScale(0, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Exponential, 0.5, true)
    end
end

UserInputService.InputBegan:Connect(onInputBegan)
#7

No idea if I’m doing something wrong but this is the outcome I’m getting
https://gyazo.com/1647a44df90398223467faa605383b55
image

#8

I think you’re doing these parts wrong. I’m pretty sure it’s supposed to be a string.

It should just be "Out" and "Exponential", not the Enum.

I might be wrong, though. I never use the TweenSize, TweenPosition, or TweenSizeAndPosition methods on GUI. I only use TweenService.

#9

The problem is that I chose the worst tweening styles and direction.
Just literally change those two to better values and it works.

#10

The time of the tween is 0.5 seconds. Even with the style and direction, you’d still see the tween. It wouldn’t use snap to size instantly.

#11

When I changed them, it worked for me at least.

local UserInputService = game:GetService("UserInputService")

local KEYCODE = Enum.KeyCode.Z

local frame: Frame = script.Parent --the path to frame
local frameSize = frame.Size
local frameShown = false

local function onInputBegan(input, processed)
	if processed then
		return
	end

	if input.KeyCode ~= KEYCODE then
		return
	end

	frameShown = not frameShown
	if frameShown then
		frame:TweenSize(frameSize, Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 0.2, true)
	else
		frame:TweenSize(UDim2.fromScale(0, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 0.2, true)
	end
end

UserInputService.InputBegan:Connect(onInputBegan)
#12

Changing the style of the tween fixed the issue I was having, it works perfectly now. Thank you!

#13

It might work either way. I don’t know. Like I said, I don’t use these methods. But the rare times I have used them, I have made that mistake before. Using a string instead of the Enum worked, however, it is strange that the style was causing it (since they work better with TweenSevice itself)

#14

Nevermind… with the Frame on it’s own the code worked but when I added it to the main GUI which this code is for only the middle objects Tween but not the others @AmoraFolf @ZerroxShiot
https://gyazo.com/1218709861dab3b029f98ef524a4ff8f

#15

Parent all the objects inside the frame, and use the Scale property instead of Offset on all the children

#16

So instead of using .fromScale() I should use offset? Didn’t understand what you just said sorry.

#17

Disregard that message, I tried using .fromOffset() but got the same outcome as the video I sent above

#18

If you go to properties on the ui objects, you can see the size property. If there’s an offset there, convert it to scale. Also parent all the objects to the frame you’re scaling.