How to tween out image from middle?

I’ve got an image that sizes in and out during a transition, but it resizes from the top left and out. I’d like it to resize outward from the middle.

Desired outcome: https://gyazo.com/9f1830bb9d2d9b8df27f80bd1b062d62
Outcome: https://gyazo.com/e428996daff759235c91283f8ff96422

Script:

local frame = script.Parent
local icon = script.Parent.ImageLabel
local tweenService = game:GetService("TweenService")

local oldSize = UDim2.new(0, 0, 0, 0)
local newSize = icon.Size

icon.Size = oldSize

local resizeInInfo = TweenInfo.new(
	1,
	Enum.EasingStyle.Quad,
	Enum.EasingDirection.Out,
	0,
	false,
	0
)

local resizeOutInfo = TweenInfo.new(
	1,
	Enum.EasingStyle.Quart,
	Enum.EasingDirection.In,
	0,
	false,
	0
)

local resizeInProperties = {
	Size = newSize
}

local resizeOutProperties = {
	Size = oldSize
}

local resizeInTween = tweenService:Create(icon, resizeInInfo, resizeInProperties)
local resizeOutTween = tweenService:Create(icon, resizeOutInfo, resizeOutProperties)

resizeInTween:Play()
resizeInTween.Completed:Wait()
wait(1)
resizeOutTween:Play()
resizeOutTween.Completed:Wait()

frame:Destroy()

set the images anchorpoint to 0.5, 0.5, this might mess up your positioning so if you want it in the middle of the screen set the position to 0.5, 0, 0.5, 0

2 Likes

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