How to lock a button inside a frame when tweening

I know this is probably an easy question and I’m stupid but how can I lock a button in place when its parent frame is tweening?

image

--[[ 
Frame Closed:
-Frame Position: {0.005, 0},{0.824, 0}
-Frame Size: {0.028, 0},{0.05, 0}
Button Position: {0, 0},{0, 0}

Frame Open:
-Frame Position: {0.005, 0},{0.575, 0}
-Frame Size: {0.028, 0},{0.3, 0}
Button Position: {0, 0},{0.832, 0}
]]

local Opened = false
local Debounce = false
local Button = script.Parent
local ButtonFrame = Button.Parent
local Frame = ButtonFrame.Parent

local Tween = game:GetService("TweenService")

local Info = TweenInfo.new(0.5)

local OpenGoal = {}
OpenGoal.Position = UDim2.new(0, 0, 0.832, 0)

local CloseGoal = {}
CloseGoal.Position = UDim2.new(0, 0, 0, 0)

local OpenGoalFrame = {}
OpenGoalFrame.Position = UDim2.new(0.005, 0, 0.575, 0);
OpenGoalFrame.Size = UDim2.new(0.028, 0, 0.3, 0);

local CloseGoalFrame = {}
CloseGoalFrame.Position = UDim2.new(0.005, 0, 0.824, 0);
CloseGoalFrame.Size = UDim2.new(0.028, 0, 0.05, 0);

local OpenTweenFrame = Tween:Create(Frame, Info, OpenGoalFrame)
local CloseTweenFrame = Tween:Create(Frame, Info, CloseGoalFrame)

local OpenTween = Tween:Create(ButtonFrame, Info, OpenGoal)
local CloseTween = Tween:Create(Button, Info, CloseGoal)

Button.Activated:Connect(function()
	if Opened == false then
		if Debounce == false then
			-- Open Menu Bar
			print("Opened")
			Debounce = true
			OpenTweenFrame:Play()
			ButtonFrame.Position = UDim2.new(0, 0, 0.832, 0)
			OpenTweenFrame.Completed:Wait()
			wait(0.5)
			print("Opened End")
			Debounce = false
			Opened = true
		else return end
		
	elseif Opened == true then 
		if Debounce == false then
			-- Close Menu Bar
			print("Closed")
			Debounce = true
			CloseTweenFrame:Play()
			ButtonFrame.Position = UDim2.new(0, 0, 0, 0)
			CloseTweenFrame.Completed:Wait()
			wait(0.5)
			print("Closed End")
			Debounce = false
			Opened = false
		else return end
		
	end
end)

You’re tweening a frame which the button is a descendant of so changes to size and position to the parent frame will naturally also move the button. The button frame should be independent of the frame its trying to tween and then changes to the target frame won’t affect the button.

1 Like

2 Answers
2

—Accepted—Accepted—Accepted—

You can set the ClipsDescendants property of the frame to true. This will cause the children of the frame to be clipped by the frame’s boundaries.

By default, the ClipsDescendants property of the frame is false.

Note: This will clip off any part of the child element that is outside of the frame’s boundaries.

Also, if you want to keep the button visible, you can set the AnchorPoint property of the button to match the AnchorPoint property of the frame.

By default, the AnchorPoint property of the button is {0.5, 0.5} and the AnchorPoint property of the frame is {0, 0}.

Here is an example:

–[[
Frame Closed:
-Frame Position: {0.005, 0},{0.824, 0}
-Frame Size: {0.028, 0},{0.05, 0}
Button Position: {0, 0},{0, 0}

Frame Open:
-Frame Position: {0.005, 0},{0.575, 0}
-Frame Size: {0.028, 0},{0.3, 0}
Button Position: {0, 0},{0.832, 0}
]]

local Opened = false
local Debounce = false
local Button = script.Parent
local ButtonFrame = Button.Parent
local Frame = ButtonFrame.Parent

local Tween = game:GetService(“TweenService”)

local Info = TweenInfo.new(0.5)

local OpenGoal = {}
OpenGoal.Position = UDim2.new(0, 0, 0.832, 0)

local CloseGoal = {}
CloseGoal.Position = UDim2.new(0, 0, 0, 0)

local OpenGoalFrame = {}
OpenGoalFrame.Position = UDim2.new(0.005, 0, 0.575, 0);
OpenGoalFrame.Size = UDim2.new(0.028, 0, 0.3, 0);

local CloseGoalFrame = {}
CloseGoalFrame.Position = UDim2.new(0.005, 0, 0.824, 0);
CloseGoalFrame.Size = UDim2.new(0.028, 0, 0.05, 0);

local OpenTween = Tween:Create(ButtonFrame, Info, OpenGoal)
local CloseTween = Tween:Create(Button, Info, CloseGoal)

local OpenTweenFrame = Tween:Create(Frame, Info, OpenGoalFrame)
local CloseTweenFrame = Tween:Create(Frame, Info, CloseGoalFrame)

Button.Activated:Connect(function()
if Opened == false then
if Debounce == false then
– Open Menu Bar
print(“Opened”)
Debounce = true
OpenTweenFrame:Play()
ButtonFrame.Position = UDim2.new(0, 0, 0.832, 0)
OpenTweenFrame.Completed:Wait()
wait(0.5)
print(“Opened End”)
Debounce = false
Opened = true
else return end

elseif Opened == true then
if Debounce == false then
– Close Menu Bar
print(“Closed”)
Debounce = true
CloseTweenFrame:Play()
ButtonFrame.Position = UDim2.new(0, 0, 0, 0)
CloseTweenFrame.Completed:Wait()
wait(0.5)
print(“Closed End”)
Debounce = false
Opened = false
else return end

end
end)

Frame.ClipsDescendants = true
Button.AnchorPoint = Vector2.new(0, 0)

-1

—Working—Working—Working—

I found a solution that works for me.

I created a second frame and made it a child of the first one. However, the child frame has the same size as the first one.

I then pinned the button to the top of the child frame, and when the first frame is tweened, it will appear to be pinned to the top of the first frame.

This is what my code looks like now:

Script:

–[[
Frame Closed:
-Frame Position: {0.005, 0},{0.824, 0}
-Frame

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