How to scale a frame without the UI elements moving

I’m not for sure if the title really makes sense, but basically, I have a UI that I am using this setup here:
image
for a custom proximity prompt. What I am trying to achieve is when the top most frame is scaled, it will sort of “cut off” the elements without them moving as they do here:


What I was wondering was how to go about this, as I will eventually be tweening the frame to this automatically.

1 Like

i wasnt able to find a property to make the scaling relative to something,
try turning off or on ClipsDescendants it will stop it from cutting off but wont be able to stop the scaling change,

i suggest u make all the frames children of surfaceUI

That’s actually the effect I’m trying to achieve-sorry for being unclear. I am actually trying to have it cut off when it moves to sort of revealing it rather than doing something like tweeting transparency. My issue is, that it moves when I adjust the top layer which is what cuts if off, I need it to remain in place.

your trying to achieve a effect where when the player triggers it, it slides up and cuts off right?

if so, just make all the needed frames the direct children of surface UI and adjust the z-indices

That sort of sounds right, I’m trying to make it when the top layer slides up and down it will cut off the parts of the UI that aren’t in the frame if that makes sense

ye just tween and ur problem is that when editing the parent frame its disturbing the children right?

make all the frames , direct child of the main_frame and tween the main frame

What do you mean by “main frame”? they are already parented to the frame called main, and if you are referring to the base frame, that still has the same issue.

my bad wrong word

make the BOXframe direct child of BASEframe
delete the MAINframe and tween the BASEframe
so that when the size of BASEframe reaches 0, it will be cutoff

if thats not what the problem is my bad i dont get it

That doesn’t change anything regardless, maybe this picture can help
Screenshot 2022-09-11 114321
Here’s something I quickly created in photoshop but it sort of gets the idea across.

wuts ur main problem tho

is it that tweening doesnt work or what?

tween the MAINframe then
it will not change BOXframe

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.

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

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?

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.

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.

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.

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

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