How to scale a frame without the UI elements moving

Help and Feedback Scripting Support
,
#13

No, it’s that, as shown in the video, the elements move when the base frame size is changed. I need to make them not move to achieve the desired effect. I also have not done any tweening yet as stated in the post.

#14

The box frame part of the main GUI part itself and is not being tweened.

#15

as of myknowledge
the children UI will always move relative to the parent, meaning changing the base frame size will move the elements.
“I need to make them not move to achieve the desired effect.”
assuming them is elements and by assuming desired effect is when the elements get cut off by the base frame when moved
tweening the base frame will move the elements, and u dont want the elements to not move, what?

#16

Yes, I’m trying to figure out a way to make them not move when the top layer is moved or in some other manner. I was just using the setup that is commonly used for things such as health bars, only with the layer being transparent rather than a solid. But I wasn’t for sure what exactly to use to do this so I made my post here.

#17

You could make the UI “children” go up (with ClipDescendants off) and it’ll cut off the top.
And move the UI down so the “children” stay in place.

#18

I made it like this:


As you can see it isn’t perfect, I should’ve adjusted the values a bit.
Dont mind the white half-transparent frame behind.

#19

This is exactly what I am looking for, how did you go about doing this? And would this work for a Surface GUI?

#20

I experimented with the values a lot.
I got a result like this:

for i = 0, -1, -0.01 do
	script.Parent.Position = UDim2.new(0, 0, i, 0) -- the frame children moving up for the cut effect.
	script.Parent.Parent.Position = UDim2.new(0, 0, 0.326, 0)+UDim2.new(0, 0, math.abs(i), 0) --[[ moving down everything so the children stay in one place. 
the 0.326 number is the Y position of the frame (that contains everything else, or in my example - a white half-transparent frame).
]]
	task.wait()
end
#21

This works for the ScreenGui. I am currently making it work on the SurfaceGui.

#22

gui_cut.rbxm (8.0 КБ)
Here it is.

#23

Hmm this doesn’t seam to work, no errors or anything just doesn’t work.

#24

What doesn’t seem to work? Could you please explain because everything works for me.

#25

The text on the part just disappears (in your example part, I have not tried it with my GUI yet).

#26

It just activates the “animation” upon the game starts.
Or another version I just made, without loops. Just tween.

script.Parent:TweenPosition(UDim2.new(0, 0, -1, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 2)
--                                                0.25 is the original position.
script.Parent.Parent:TweenPosition(UDim2.new(0, 0, .25+1, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 2)
#27

Oh, I see no loop, that would make sense on why it’s not visible. Alright, I’ll try it with my setup and see if it works.

#28

Okay, so I’ve run into a few issues when I’ve tried modifying it to work with my script. For starters, here’s the script:


local proximityPromptService = game:GetService("ProximityPromptService")

proximityPromptService.PromptShown:Connect(function(prompt)
	prompt.Prompt.SurfaceUI.Enabled = true
	prompt.Beam.Attachment1 = game.Players.LocalPlayer.Character.UpperTorso:FindFirstChild("BodyFrontAttachment")
	for i = 0, -1, -0.01 do
		prompt.Prompt.SurfaceUI.TweenFrame.Elements:TweenPosition(UDim2.new(0, 0, 0, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 2)
		--                   Your frame position goes here \/
		prompt.Prompt.SurfaceUI.TweenFrame:TweenPosition(UDim2.new(0, 0, .25+1, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 2)
		task.wait()
	end
end)

proximityPromptService.PromptHidden:Connect(function(prompt)
	prompt.Prompt.SurfaceUI.Enabled = false
	prompt.Beam.Attachment1 = nil
	for i = 0, -1, -0.01 do
		prompt.Prompt.SurfaceUI.TweenFrame.Elements:TweenPosition(UDim2.new(0, 0, -1, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 2)
		--                   Your frame position goes here \/
		prompt.Prompt.SurfaceUI.TweenFrame:TweenPosition(UDim2.new(0, 0, .25+1, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 2)
		task.wait()
	end
end)

Here’s an example video showing my issue:


One of the issues is the whole prompt is moving rather than the prompt staying but the frame moving to look like it’s being cut off. Also, it doesn’t seam to be tweeting when the prompt hides.

#29

I found out a better way to do it with UIGradient.

local delta = 0.01

-- top cut to down

for i = 0, 1, delta do
	script.Parent.UIGradient.Transparency = NumberSequence.new({
		NumberSequenceKeypoint.new(0, 1),
		NumberSequenceKeypoint.new(i, 1),
		NumberSequenceKeypoint.new(math.min(i+delta, 1), 0),
		NumberSequenceKeypoint.new(1, 0)
	})
	task.wait()
end


-- backwards

for i = 1, 0, -delta do
	script.Parent.UIGradient.Transparency = NumberSequence.new({
		NumberSequenceKeypoint.new(0, 1),
		NumberSequenceKeypoint.new(i, 1),
		NumberSequenceKeypoint.new(math.min(i+delta, 1), 0),
		NumberSequenceKeypoint.new(1, 0)
	})
	task.wait()
end
#30

You should remove the loop if you’re using the tween-position method.

1 Like
#31

Hmm still having issues, here’s my layout for the UI, should I change the ordering of anything?
image

#33

At the PromptShown event, set the position of Elements to UDim2.new(0, 0, -1, 0), TweenFrame to UDim2.new(0, 0, “original y”+1, 0). No tween.
Then tween it all to original positions.