Create a teleporting animation

[qxseb (seb)]

I’m trying to make an animation for a simulator game, when a player touches a part, the screen becomes black from the exterior to the middle while in the middle there is a transparent circle that shows the game until it’s completely black.

I can’t seem to find a way to approach this, I tried using an external image, or 2 frames combined but none worked.

I tried using this frame but it didn’t seem to work as the scaling was weird

[Nextinel2008 (Nextinel2)]

Hi! I have an idea. You need to make a image of black screen with the not big hole in it. After you need to export it in studio, then create in this image UIScale and set AnchorPoint to 0.5, 0.5:

Then set UIScale scale to 2 and image size to {1, 0} {1, 0} (set size to make a hole big). After use tween service to animate it, like this:

local image = script.Parent
local uiScale = image:WaitForChild("UIScale")

game.TweenService:Create(uiScale, TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {Scale = 0.5)

this can work not ideal, cuz this is just an example, you can experiment with this.

[yo9sa (yosa)]

Is this what you are looking for?

[qxseb (seb)]

Yes, I’m not really sure how to approach this though

[yo9sa (yosa)]

For this you need a UIStroke with high Thickness.

First of all, in this script we define the end of the screen using offset, which does not depend on the width/length of the screen. Then, using TweenService, we create the animation.

Also, the CloseViewport and OpenViewport functions are responsible for the beginning and end of the animation.

local TweenService = game:GetService("TweenService")

local Camera = workspace.CurrentCamera

local Frame = script.Parent.Frame
local UIStroke = Frame.UIStroke

local Time = 2

---------------------------------------------------------------------------------------------------------

local ViewportOffset: UDim2

if Camera.ViewportSize.X >= Camera.ViewportSize.Y then
	ViewportOffset = UDim2.fromOffset(Camera.ViewportSize.X + 500, Camera.ViewportSize.X + 500)
else
	ViewportOffset = UDim2.fromOffset(Camera.ViewportSize.Y + 500, Camera.ViewportSize.Y + 500)
end

Frame.Size = ViewportOffset

---------------------------------------------------------------------------------------------------------

-- To start animation
local function CloseViewport()
	UIStroke.Transparency = 0
	
	TweenService:Create(Frame, TweenInfo.new(Time, Enum.EasingStyle.Quad, Enum.EasingDirection.Out), {
		Size = UDim2.fromOffset(0, 0)
	}):Play()
end

-- To finish animation
local function OpenViewport()
	local Tween = TweenService:Create(Frame, TweenInfo.new(Time, Enum.EasingStyle.Quad, Enum.EasingDirection.In), {
		Size = ViewportOffset
	})
	
	Tween.Completed:Once(function()
		UIStroke.Transparency = 1
	end)
	
	Tween:Play()
end

---------------------------------------------------------------------------------------------------------

CloseViewport()

I’ll leave the file if it’s easier for you!
EffectGui.rbxm (4,8 КБ)

[qxseb (seb)]

Great! Thank you so much wouldn’t have figured it out tbh on my own