What is the best way to make bars close the screen and vise-versa?

Hello Developers!

I’ve finally created an effect where when the screen gets closed by two black bars covering the screen and vise-versa. Although, how I did them felt like bad practice.

The reason why is that, for starters, when I was making the bars close the screen by covering the screen, the lower bar randomly decided to rather extend itself on the bottom rather than the middle. I fixed this by adding in a clone of the lower black bar although I didn’t like using this solution.

The second reason is that I sometimes need to not only tween the size but also the position of the bars so they won’t randomly just move away from their original spot.

So what’s the best way of making the screen close via two bars covering the screen and vise-versa?

1 Like

Does the bars start in the middle and closes? You could try making it only use one frame using 0.5, 0.5 anchor point and setting the position to 0.5, 0.5. This will set the frame’s position to the middle of the screen. Using this we can change the size of the bar on both sides


1 Like

just realized you said two black bars from the top and bottom (or maybe not)

Anyway, the top bar’s anchor point needs to be: 0.5, 0
with a position of {0.5, 0},{0, 0}

and the bottom bar’s anchor point need to be: 0.5 ,1
with the position of {0.5, 0},{1, 0}

Now if you change the size it will resize and move to the middle while keeping its original position. You can mess around with anchor point it’s really cool. For example, if you want the frame to resize outwards you can set it to 0.5, 0.5 When you resize this one, you it will keep its position and resize outwards. Anchor point determines where the origin point of the UI is.

1 Like

I’ve decided to do your trick by changing the anchor points. The issue however is that the video I’ll provide you, shows that the bottom black bar just simply moved down rather than up to close the screen.

EDIT: I also forgot to mention the code to close the screen, it will be provided below the video.

local Bar1 = script.Parent.Parent:WaitForChild("Bar1")
local Bar2 = script.Parent.Parent:WaitForChild("Bar2")

local db = false
script.Parent.MouseButton1Click:Connect(function()
	if db then return end
	
	db = true
	Bar1:TweenSize(
		UDim2.new(1.012, 0, -0.919, 0),
		Enum.EasingDirection.Out,
		Enum.EasingStyle.Sine,
		1,
		false
	)
	Bar2:TweenSize(
		UDim2.new(1.012,0,0.912,0),
		Enum.EasingDirection.Out,
		Enum.EasingStyle.Sine,
		1,
		false
	)
	task.wait(1.5)
	script.Parent.Parent.Enabled = false
end)
1 Like

You’re changing the size in the wrong direction. Remove the negatives on the UDim2 see if it works.

1 Like

Nvm, I’ve actually managed to fix it just by reorganizing the bars, thanks a lot man!

1 Like

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