Is there a way to do this better?

Help and Feedback Scripting Support
,
#1

I want to make the UI move for the popping out element.

Issue is clear in the video:

Have not found any solutions because I do not know what to look for

local viewport = script.Parent
local button_info = viewport:WaitForChild("infoButton")
local info_slider = viewport:WaitForChild("InfoSlider")

local UIListLayout = nil
local startingPadding = UDim.new(0,0)

if viewport.Parent:IsA("ScrollingFrame") then

	UIListLayout = viewport.Parent:FindFirstChildOfClass("UIListLayout")

	startingPadding = UIListLayout.Padding
end

button_info.MouseButton1Click:Connect(function()

	if info_slider.Position.X.Scale == 0 then

		info_slider:TweenPosition(UDim2.fromScale(0.946,0), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine, 0.5, true)
		if UIListLayout then

			local info = TweenInfo.new(0.5, Enum.EasingStyle.Sine,Enum.EasingDirection.InOut)
			
			local props = {}
			
			props.Padding = UDim.new(startingPadding.Scale,viewport.AbsoluteSize.X)
			
			game:GetService("TweenService"):Create(UIListLayout, info, props):Play()
		end
	else

		info_slider:TweenPosition(UDim2.fromScale(0,0), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine, 0.5, true)
		if UIListLayout then
			
			local info = TweenInfo.new(0.5, Enum.EasingStyle.Sine,Enum.EasingDirection.InOut)

			local props = {}
			props.Padding = UDim.new(startingPadding.Scale,0)

			game:GetService("TweenService"):Create(UIListLayout, info, props):Play()
		end
	end
end)
7 Likes
#2

Can you show me everything that is within the GUI? As in like picture or tell me what’s inside it.

3 Likes
#3

image
Here you go

3 Likes
#4

Kk! can you show me the properties of UI padding?

2 Likes
#5

Either in Image, or text is fine with me.

2 Likes
#6

I use the padding of the UIlistlayout for this BTW - Here is what you asked for though
image

2 Likes
#7

Kk! What I want you to try is removing the UIPadding and then Running it, and see what happens from there.

2 Likes
#8

Just tried that out before you told me that, it keeps the ui pretty close together, but the objects at the end still shoot off the screen.

image
image1303×245 99.1 KB

2 Likes
#9

just dont tween the padding, uilistlayout should do all the work for you

2 Likes
#10

I already tried that, the info hides behind the other UI without the changes to padding

2 Likes
#11

Hmmm, try making the padding closer maybe together maybe?

2 Likes
#12

Which one?
image

2 Likes
#13

The UIPadding one is the one I’m talking about.

2 Likes
#14

Yeah I do not think that will work, thats the padding I am changing to give the space for the ui to pop out

1 Like
#15

i managed to make what you want but my small brain cant explain how so heres the rblx file
RobloxStudioBeta_352pyg80yn
eagujawbeuitgheasiuogheas.rbxl (51.7 KB)

1 Like
#16

So in this version you just changed the size?

1 Like
#17

yeah, create a frame that has clipsdescendants set to true, parent the viewportframe to it and tween the frames size

1 Like
#18

ohh I see, so the frames size is equal to the viewport frame’s size at the start, but when I want to expand the ui, just make the frame bigger?

1 Like
#19

yes just make sure to use offset and not scale to size up and position the viewportframe (and the frame that holds the info) or else it will just expand with the frame when it tweens

1 Like
#20

I see a problem, how will the Ui scale properly if a player uses a mobile device or something.

1 Like