How do I tween a frame from the middle?

Hello world!
So my issue I’m having is trying to tween the frame from the middle,
example: In get a snack at 4 am, the objective frame would tween out from the middle, and then go back into the middle, then down. How do I achieve this?

My code so far (just tweens down then up)

local TweenService = game:GetService("TweenService")
local Event = game.ReplicatedStorage.Events:WaitForChild("popUpUI")

local plr = game.Players.LocalPlayer
local detector = game.Workspace.Cafe.Inside.Detector

detector.Touched:Connect(function(touched)
	if touched.Parent == plr.Character then	
		
		script.Parent.Parent.Visible = true
		Event:FireServer()
		
		local newsize = UDim2.new(0, 785,0, 145)
		local tweenInfo = TweenInfo.new(0.8, Enum.EasingStyle.Back, Enum.EasingDirection.In)

		local tween = TweenService:Create(script.Parent.Parent, tweenInfo, {Size = newsize})

		tween:Play()
		
		task.wait(2)
		
		local newsize = UDim2.new(0, 785,0, 0)
		local tweenInfo = TweenInfo.new(0.8, Enum.EasingStyle.Back, Enum.EasingDirection.In)

		local tween = TweenService:Create(script.Parent.Parent, tweenInfo, {Size = newsize})
		
		tween:Play()
		task.wait(1)
		
		script.Parent.Parent.Visible = false
	end
end)
1 Like

Set the AnchorPoint of the frame to 0.5, 0 if you want it centered on the X axis then set the X position of the object to 0.5, 0

1 Like

I don’t mean I want it tweened in the middle of the screen, sorry, I mean I want it to tween like this
← [frame] →
going outwards from left to right

1 Like

yeahh this should work for that

1 Like

should i script it into the tween or just set it like that
(i dont know how to do either of those :smiling_face_with_tear:)

1 Like

noo just set it


and then it should work like this:

edit:
i just noticed you would need to change ur script too so that it tweens the X axis not the Y

local newsize = UDim2.new(0, 785, 0, 0)
local tweenInfo = TweenInfo.new(0.8, Enum.EasingStyle.Back, Enum.EasingDirection.In)

to:

local newsize = UDim2.new(0, 0, 0, 145)
local tweenInfo = TweenInfo.new(0.8, Enum.EasingStyle.Back, Enum.EasingDirection.In)
1 Like

i don’t need to change the script or anything like that?

wouldn’t it need to tween both to go like
<-[frame]->
and also which part of the script would i need to change?

		
		script.Parent.Parent.Visible = true
		Event:FireServer()
		
		local newsize = UDim2.new(0, 785,0, 145)
		local tweenInfo = TweenInfo.new(0.8, Enum.EasingStyle.Back, Enum.EasingDirection.In) --this tween or 

		local tween = TweenService:Create(script.Parent.Parent, tweenInfo, {Size = newsize})

		tween:Play()
		
		task.wait(2)
		
		local newsize = UDim2.new(0, 785,0, 0)
		local tweenInfo = TweenInfo.new(0.8, Enum.EasingStyle.Back, Enum.EasingDirection.In) -- this tween?

		local tween = TweenService:Create(script.Parent.Parent, tweenInfo, {Size = newsize})
		
		tween:Play()
		task.wait(1)
		
		script.Parent.Parent.Visible = false
-- or both? like what

You do not need to change your script as long as you set your AnchorPoint correctly.

Just in case you are not aware, the Anchor Point is from where on the UI object everything comes out of. If the Anchor Point is at 0.5, 0.5, it means any position or size you set will use the center of the object. With this said, if you were to change the size, it would grow / shrink in all directions.

3 Likes

okay! thank you seriously so much for the help. i really appreciate it!

1 Like

just tried it out. thank you so much!

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