How do I make a transition like pet catchers?

[zeyan200_gotdeleted (VERVA1N)]

What I want to make

I want to make something like this

---

What I ended up making.

---

Code

---------------------- || Variables || ----------------------

local Main = {} ; Main.__index = Main ; setmetatable(Main,{})

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local TweenService = game:GetService("TweenService")

local EventStorage = ReplicatedStorage:WaitForChild("RemoteStorage")


---------------------- || Methods || ----------------------

function Main:Transition()
	for i = 1, 100, 1 do
		local Rad = math.random(-1,1)
		
		if Rad == 0 then Rad = 1 end
		
		local particle = Instance.new("Frame")
		particle.Size = UDim2.new(0, 100, 0, 100)
		particle.Position = UDim2.new(0, 0, Rad, 0)
		particle.BorderSizePixel = 0
		particle.BackgroundColor3 = Color3.fromRGB(33, 33, 33)
		particle.Parent = script.Parent

		local UICorner = Instance.new("UICorner", particle)
		UICorner.CornerRadius = UDim.new(1, 0)

		local tweenInfo = TweenInfo.new(
			2, 
			Enum.EasingStyle.Linear,
			Enum.EasingDirection.Out,
			0,
			false,
			0
		)

		local tween = TweenService:Create(particle, tweenInfo, {
			Position = UDim2.new(1, -50, 0, 0),
			Size = UDim2.new(1, 0, 1, 0),
			Rotation = math.random(-500, 500)
		})
		tween:Play()

		tween.Completed:Connect(function(PlaybackState)
			task.wait(.2)
			particle:Destroy()
		end)
		wait(.01)
	end
end

---------------------- || RBX Signals || ----------------------

EventStorage.Teleport.OnClientEvent:Connect(function()
	Main:Transition()
end)

[zeyan200_gotdeleted (VERVA1N)]

(Going to sleep right now so I will reply tomorrow )

[aeficium (a_c3y)]

I’m assuming they started with a frame with multiple circles on the screen then in diagonal rows they named the circles “1”, “2”, etc until each diagonal row had a number. After, they just sized them down a lot (while maintaining the position) and disabled them. To run the transition, they’d do a
for i=1,10,1 do

and in that they’d do a

for _,Circle in pairs(Frame:GetChildren()) do if Circle.Name == i then Circle.Enabled = true (tween size)

Then for the reverse they’d do for i=10,1,-1 do. That’s just my assumption though, could be wrong but it’s how I’d do it.

[zeyan200_gotdeleted (VERVA1N)]

That is a good idea, this may take a while