How to make this UI effect?

Help and Feedback Art Design Support
, , ,
#1

Hello everyone!

  1. What do you want to achieve?
    I would like to have such an effect as in my video.
    Frame
  • Button pressed < Frame opens with effect
  • Close button pressed < Frame closes with effect
  1. What is the issue?
    Unfortunately I don’t know how to script tweens.
    And, how to make a (in this case a dark) frame that also goes to the very top, where the buttons of the CoreGui are.

Sincerely,

CSJeverything

2 Likes
#2

Please tell me if this is in the wrong category. Thanks :slightly_smiling_face:

3 Likes
#3

Hi there!

So, first off. Here’s an article to help you out on Tweening.
Tween - Roblox Developer Hub

Now, I can’t really code it for you because that is considered ‘spooning’ or whatever the term is called. But, if you’d like, I can give you examples of tweening! If you do, I’ll try explaining on how they work.

1 Like
#4

Don’t worry, it isn’t. :slight_smile:

1 Like
#5

My code works now after some work and fixing. I used this article: UI Animations | Roblox Creator Documentation

local TweenService = game:GetService("TweenService")

local Button = script.Parent
local Frame = script.Parent.Parent.Frame
local DarkBackground = script.Parent.Parent.Background
local CloseButton = Frame.Close

local function openFrame()
	Frame.Position = UDim2.new(0.5, 0, -2, 0)
	Frame.Visible = true
	local FrameTweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Sine, Enum.EasingDirection.In)
	local FrameTween = TweenService:Create(Frame, FrameTweenInfo, {Position=UDim2.new(0.5, 0, 0.5, 0)})

	DarkBackground.Transparency = 1
	DarkBackground.Visible = true
	local DarkBackgroundTweenInfo = TweenInfo.new(0.2, Enum.EasingStyle.Sine, Enum.EasingDirection.In)
	local DarkBackgroundTween = TweenService:Create(DarkBackground, DarkBackgroundTweenInfo, {Transparency=0.6})

	FrameTween:Play()
	DarkBackgroundTween:Play()
end

local function closeFrame()
	Frame.Position = UDim2.new(0.5, 0, 0.5, 0)
	local FrameTweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
	local FrameTween = TweenService:Create(Frame, FrameTweenInfo, {Position=UDim2.new(0.5, 0, -2, 0)})

	DarkBackground.Transparency = 0.6
	local DarkBackgroundTweenInfo = TweenInfo.new(0.3, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
	local DarkBackgroundTween = TweenService:Create(DarkBackground, DarkBackgroundTweenInfo, {Transparency=1})

	FrameTween:Play()
	DarkBackgroundTween:Play()

	FrameTween.Completed:Connect(function()
		Frame.Visible = false
	end)
	DarkBackgroundTween.Completed:Connect(function()
		DarkBackground.Visible = false
	end)
end


Button.MouseButton1Click:Connect(function()
	if Frame.Visible == true then
		closeFrame()
	else
		openFrame()
	end	
end)
--DarkBackground.MouseButton1Click:Connect(closeFrame)
CloseButton.MouseButton1Click:Connect(closeFrame)
3 Likes
#6

Thank you! It works now with my script.

I never wrote such a long script :sweat_smile:

1 Like
#7

Here is a video:
Video

#8

I know you may not need this, but it’s faster and easier to actually shorten the script. There’s also a couple of things there that aren’t necessary for it to work. I recommend trying something like this in the future.

local btn = script.Parent
local f = script.Parent.Parent:WaitForChild("Frame") -- this allows for the frame to load in
local cbtn = f:WaitForChild("Close")

local o = false -- tells us if the frame is open or closed

btn.MouseButton1Click:Connect(function()
    if o == true then
        f:TweenPosition(UDim2.new(0.5, 0, 0.5, 0),"Out","Sine",0.3) -- you can add the "DarkBackground" stuff
        o = false
    else
        f:TweenPosition(UDim2.new(0.5, 0, -2, 0),"In","Sine",0.2)
        o = true
end)

cbtn.MouseButton1Click:Connect(function()
    f:TweenPosition(UDim2.new(0.5, 0, 0.5, 0),"Out","Sine",0.3)
    o = false
end)

I think that should be an effective way to make your script shorter. Really, just focus on the “f:TweenPosition…” part as that’s a much easier and faster way to shorten tweening.

Hope this helped!

4 Likes