How could i recreate this UI animation

The title basically says it all

1 Like

You could make an image which is a fully black screen, and just has a small transparent hole in the middle.

Then just tween it’s size really big to make it disappear.

1 Like

Hey there. The best way I can think about doing this is through imagelabels and tweensizing.
Image
I’ve created this image through paint.net, essentially give it a background then making it a transparent circle in the middle.
After this, you’ll want to add frames for the borders of the screen so when the circle is being tweened they also move in to stop any areas not being covered. (I’ve put these into a folder called Borders)

All of these should be set with an anchorpoint of 0.5, 0.5

I put it into a screengui with a localscript:

local image = script.Parent:WaitForChild("ImageLabel")
local borders = script.Parent:WaitForChild("Borders"):GetChildren()

local function transition()
	for i = 1, #borders do
		borders[i]:TweenSize(UDim2.new(1,0,1,0),"InOut","Sine",1) --Makes the borders cover the screen
	end
	image:TweenSize(UDim2.new(0,0,0,0),"InOut","Sine",1) --Makes the image disappear, the 1 is how fast
end

wait(3)
transition()

You may need to do it differently depending on your sizes and how fast you want it to go

4 Likes

I think you can just use a transparent frame with a ui corner and ui stroke that is set to max thickness and just tween the size of the frame to zero offset or scale (im not sure if ui stroke max thickness able to fill up the whole screen)

srry i cant test it bcuz im using a phone rn

could i by any chance have that file?

1 Like

It’s not very clean but here:
UITransition.rbxl (57.0 KB)

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