Fade out GUI like in animal crossing?

Help and Feedback Scripting Support
#1

Hi,

I have a fade out gui, but I would like to adjust it to work like in animal crossing. Like the circular fade out, if that’s possible.

EX:

Here is my script.

local Remote = game.ReplicatedStorage.GuiAnimate

local TweenService = game.TweenService
local TI = TweenInfo.new(
	1,
	Enum.EasingStyle.Quint,
	Enum.EasingDirection.Out,
	0,
	false,
	0
)

local BackGroundFrame = script.Parent.Parent

local plr = game.Players.LocalPlayer
local char = plr.Character or plr.CharacterAdded:Wait()

Remote.OnClientEvent:Connect(function(Part)
	local FadeBG_In = TweenService:Create(BackGroundFrame, TI, {BackgroundTransparency = 1})
	local FadeText_In = TweenService:Create(script.Parent, TI, {TextTransparency = 1})
	
	local FadeBG_Out = TweenService:Create(BackGroundFrame, TI, {BackgroundTransparency = 0})
	local FadeText_Out = TweenService:Create(script.Parent, TI, {TextTransparency = 0})
	
	FadeBG_Out:Play()
	FadeText_Out:Play()
	
	FadeBG_Out.Completed:Wait()
	char:MoveTo(Part.CFrame * Vector3.new(0,3,0))
	wait(1)
	FadeBG_In:Play()
	FadeText_In:Play()
end)

while true do
	script.Parent.Text = "Teleporting"
	wait(0.57)
	script.Parent.Text = "Teleporting."
	wait(0.57)
	script.Parent.Text = "Teleporting.."
	wait(0.57)
	script.Parent.Text = "Teleporting..."
	wait(0.57)
end
3 Likes
#2

Hi, I’m bumping the thread. If anyone can help, I would really appreciate it! :slight_smile:

#3

Don’t know if this will work, but you can try making an image with a hole in it and scaling it using a tween

#4

I actually made this effect a while back!

  • make a frame, set it’s backgroundtransparency to 1 and center it
  • insert a UICorner and set it to 1, 0
  • insert a UIAspectRatioConstraint
  • insert a UIStroke and set it’s thickness to something like 9999 so it covers the whole screen. you now have a black background with a hole in the middle.
  • you can now tween it’s size from something like 2, 0, 2, 0 to 0, 0, 0, 0

There you go (:

EDIT:
showcase


EDIT #2:
lol I just realised the video’s exactly 1 minute long

6 Likes
Test with Teleporter + Door + Fade Simualtor
#5

Hi! Thanks for your repose. Do you have any idea how I could implement this into my current code? I’m fairly new to coding :slight_smile:

local Remote = game.ReplicatedStorage.GuiAnimate

local TweenService = game.TweenService
local TI = TweenInfo.new(
	1,
	Enum.EasingStyle.Quint,
	Enum.EasingDirection.Out,
	0,
	false,
	0
)

local BackGroundFrame = script.Parent.Parent

local plr = game.Players.LocalPlayer
local char = plr.Character or plr.CharacterAdded:Wait()

Remote.OnClientEvent:Connect(function(Part)
	local FadeBG_In = TweenService:Create(BackGroundFrame, TI, {BackgroundTransparency = 1})
	local FadeText_In = TweenService:Create(script.Parent, TI, {TextTransparency = 1})
	
	local FadeBG_Out = TweenService:Create(BackGroundFrame, TI, {BackgroundTransparency = 0})
	local FadeText_Out = TweenService:Create(script.Parent, TI, {TextTransparency = 0})
	
	FadeBG_Out:Play()
	FadeText_Out:Play()
	
	FadeBG_Out.Completed:Wait()
	char:MoveTo(Part.CFrame * Vector3.new(0,3,0))
	wait(1)
	FadeBG_In:Play()
	FadeText_In:Play()
end)

while true do
	script.Parent.Text = "Teleporting"
	wait(0.57)
	script.Parent.Text = "Teleporting."
	wait(0.57)
	script.Parent.Text = "Teleporting.."
	wait(0.57)
	script.Parent.Text = "Teleporting..."
	wait(0.57)
end
#6

I guess you could replace the transparency tweening with tweening the size of the frame/hole.