Creating diagonal UI transition

I am wanting to create a transition where from the top left, to bottom right, squares appear on the screen. I am running into numerous problems with it however. It’s creating tiles above and below the screen, and duplicating tiles on the right

local AMOUNT = 12
local SIZING = math.ceil(HUD.AbsoluteSize.X / AMOUNT)
local TWEEN_INFO = TweenInfo.new(0.5, Enum.EasingStyle.Linear)

local PreviousTile = nil
local Count = 0
local XStart = 0

--// Create tile
local function CreateTile(x, y)
	--print("Y", (SIZING * y) + (SIZING / 2))
	local Tile = Template:Clone()
	Tile.Name = Count
	Tile.Position = UDim2.fromOffset((SIZING * x) + (SIZING / 2), (SIZING * y) + (SIZING / 2))
	Tile.Parent = Main
	
	local TweenIn = TweenService:Create(
		Tile,
		TWEEN_INFO,
		{
			Size = UDim2.fromOffset(SIZING, SIZING),
		}
	)
	TweenIn:Play()
	
	Count += 1
	
	return Tile
end

--// Create diagonal
local function CreateDiagonal(y)
	PreviousTile = CreateTile(XStart, y)
	print(XStart, y)
	for i = XStart, AMOUNT do
		PreviousTile = CreateTile(i, y - i)
		print(i, y - i)
		if PreviousTile.AbsolutePosition.Y <= -36 then break end -- Last tile was at top of screen
		
		if PreviousTile.Position.Y.Offset >= AMOUNT * SIZING then
			XStart += 1
		end
		
		task.wait(2)
	end
end

--// Play transition
function Transition.Play(location)
	PreviousTile = CreateTile(0, 0)
	
	for i = 1, 20 do
		CreateDiagonal(i)
		
		task.wait(0.01)
	end
end


As you can see, Frames 1 and 2 are created in the same position, and Frame 4 is created above the screen. If I were to leave the video to play out, it’d also create frames off the screen.

Transition should be like a staircase.

You’ve probably just got the wrong positioning formula, try to play around with it.