# 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

end
end

--// Play transition
function Transition.Play(location)
PreviousTile = CreateTile(0, 0)

for i = 1, 20 do
CreateDiagonal(i)