Introduction:
A wide variety of games use Screen Transitions such as Intros, loading screens, and normal transitions (teleporting for example).
In this topic, You’ll find 3 methods of Fade In and Fade Out transitions using tween service, and color correction effects. And how to simply use them (For one player, or multiple).
Secondly,
Color Correction Tweening is much Simpler than Tweening a GUI, and easier to use.
Pros:
- Shorter Code.
- Free mouse movement (Mouse gets stuck in first person using a GUI)
- Easy access to the tweened object.
- No pre-messing with properties (Such as size, transparency, Color)
- No messing with the TopBar Gui
Cons:
- Name-tags are visible when the screen is dark.
- Less customizable, no text/images unless using external GUI.
Final Result:
Main Fade-in/Out:
Fade-In/Out on Touch
Fade-In/Out on Death
Resources Used:
Tween Service
Color Correction Effects
Why use ModuleScript?
The reason is to shorten the code;
Easily access the function from both server and client.
I’ve decided to remove that from the resources as this is not a must.
Tutorial:
There are 3 options to accomplish transitions using this method.:
Which one to use is up to you.
Which one should I use?
It depends on your needs:
If you only need Fade-out/in with Black/Dark colors, or a non-Fade-in/out transition, use Option 1
If you only need Fade-out/in with Black/White, use Option 2
If you want transitions with selectable color, use Option 3
Step 1 (For all Options):
Open up the explorer and create a ColorCorrectionEffect in Lighting
Note: If you have multiple ColorCorrection effects, just name this one accordingly, I will name mine FadeInOut.
Step 2:
Create any type of script to your preference, and parent (locate) it accordingly.
I used a ModuleScript to easily access the function both from the client and the server. I called my Module Script Transitions and placed it in ReplicatedStorage.
Just remember, you can use server/local scripts, it’s much easier to not repeat yourself and use functions.
Step 3:
Let’s get to coding! 
This step is divided into the 3 options, just pick the one you use.
The Tint color just changes the color and the brightness can make everything dark before the Fade-Out is done.
As I know, you can’t make a white Fade-Out but using the TintColor, correct me if I am wrong.
So with the brightness, you can make white Fade-Outs too.
But the third way, you can fully customize the color of your Fade-Out, but to get the right color, you need to change the brightness to the one that fits your color.
Let’s go to the script now.
Option 1: Tween the TintColor
In this option, we use 2 functions: Fade-In and Fade-Out.
In each function, we tween the TintColor using TweenService to the desired color (Black and White)
Further explanations can be found in the code:
local module = {}
local TweenService = game:GetService("TweenService") --Define the tween service.
module.FadeOut = function(object) --New function added to the table
local info = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 1) --Tween settings
local goal = {TintColor = Color3.fromRGB(0,0,0)} --Our property goal
local tween = TweenService:Create(object, info, goal) --Create the tween
tween:Play() --Play the tween
return tween --Return it, so we can wait to see if it's completed.
end
module.FadeIn = function(object) --New function added to the table
local info = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 1) --Tween settings
local goal = {TintColor = Color3.fromRGB(255,255,255)} --Our property goal
local tween = TweenService:Create(object, info, goal) --Create the tween
tween:Play() --Play the tween
return tween --Return it, so we can wait to see if it's completed.
end
return module
Only black Fade-Out, you can change the color but it will look not fully solid.
Option 2: Tween the Brightness
In this option, we use almost identical 2 functions: Fade-In and Fade-Out.
In each function, we tween the Brightness using TweenService to the Brightness (Black and White, or transparency)
Further explanations can be found in the code:
local module = {}
local TweenService = game:GetService("TweenService") --Define the tween service.
module.FadeOut = function(object) --New function added to the table
local info = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 1) --Tween settings
local goal = {Brightness = -1} --Our property goal
local tween = TweenService:Create(object, info, goal) --Create the tween
tween:Play() --Play the tween
return tween --Return it, so we can wait to see if it's completed.
end
module.FadeIn = function(object) --New function added to the table
local info = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 1) --Tween settings
local goal = {Brightness = 0} --Our property goal
local tween = TweenService:Create(object, info, goal) --Create the tween
tween:Play() --Play the tween
return tween --Return it, so we can wait to see if it's completed.
end
return module
Only black Fade-Out, you can change the Brightness according to the transparency you want to achieve.
Option 3: Tween both TintColor and Brightness
In this option, we only use 1 function that creates the transition with the brightness and input we decided. (The function parameters).
local TweenService = game:GetService("TweenService") --Define the tween service.
local module = function(object, bright, color) --New function added to the table
local info = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 1) --Tween settings
local goal = {Brightness = bright; TintColor = color } --Our property goal
local tween = TweenService:Create(object, info, goal) --Create the tween
tween:Play() --Play the tween
return tween --Return it, so we can wait to see if it's completed.
end
--When you call this function, you have to provide it the ColorCorrection object, the Brightness value, and the TintColor color.
return module
How to use:
To use this, you can just call the module function from any script/local script.
Note: If you're not using a ModuleScript, your code should look like this:
Option 1: Tween the TintColor
local transitions= {}
local TweenService = game:GetService("TweenService") --Define the tween service.
transitions.FadeOut = function(object) --New function added to the table
local info = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 1) --Tween settings
local goal = {TintColor = Color3.fromRGB(0,0,0)} --Our property goal
local tween = TweenService:Create(object, info, goal) --Create the tween
tween:Play() --Play the tween
return tween --Return it, so we can wait to see if it's completed.
end
transitions.FadeIn = function(object) --New function added to the table
local info = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 1) --Tween settings
local goal = {TintColor = Color3.fromRGB(255,255,255)} --Our property goal
local tween = TweenService:Create(object, info, goal) --Create the tween
tween:Play() --Play the tween
return tween --Return it, so we can wait to see if it's completed.
end
------How to use:
local colorCorrectionObject = game:GetService("Lighting"):WaitForChild("ColorCorrection") --Path to your ColorCorrectionEffect.
transitions.FadeOut(colorCorrectionObject) --To fade out
--Or,
transitions.FadeIn(colorCorrectionObject) --To fade in
Option 2: Tween the Brightness
local transitions= {}
local TweenService = game:GetService("TweenService") --Define the tween service.
transitions.FadeOut = function(object) --New function added to the table
local info = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 1) --Tween settings
local goal = {Brightness = -1} --Our property goal
local tween = TweenService:Create(object, info, goal) --Create the tween
tween:Play() --Play the tween
return tween --Return it, so we can wait to see if it's completed.
end
transitions.FadeIn = function(object) --New function added to the table
local info = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 1) --Tween settings
local goal = {Brightness = 0} --Our property goal
local tween = TweenService:Create(object, info, goal) --Create the tween
tween:Play() --Play the tween
return tween --Return it, so we can wait to see if it's completed.
end
--How to use:
local colorCorrectionObject = game:GetService("Lighting"):WaitForChild("FadeInOut") --Path to your ColorCorrectionEffect.
transitions.FadeOut(colorCorrectionObject) --To fade out
--Or,
transitions.FadeIn(colorCorrectionObject) --To fade in
Option 3: Tween both TintColor and Brightness:
local TweenService = game:GetService("TweenService") --Define the tween service.
local function fade(object, bright, color) --New function added to the table
local info = TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out, 0, false, 1) --Tween settings
local goal = {Brightness = bright; TintColor = color } --Our property goal
local tween = TweenService:Create(object, info, goal) --Create the tween
tween:Play() --Play the tween
return tween --Return it, so we can wait to see if it's completed.
end
--How to use:
local colorCorrectionObject = game:GetService("Lighting"):WaitForChild("FadeInOut") --Path to your ColorCorrectionEffect.
fade(colorCorrectionObject, 3, Color3.fromRGB(255,0,0)) --Change the values accordingly, this code will create a Red Bright Fade-out.
For Instance:
local transitions = require(game:GetService("ReplicatedStorage"):WaitForChild("Transitions")) --Load the transition functions.
local colorCorrectionObject = game:GetService("Lighting"):WaitForChild("FadeInOut") --Path to your ColorCorrectionEffect.
-----Option 1 & 2:
transitions.FadeOut(colorCorrectionObject) --To fade out
--Or,
transitions.FadeIn(colorCorrectionObject) --To fade in
-----Option 3:
transitions(colorCorrectionObject, 3, Color3.fromRGB(255,0,0)) --Red bright fade-out, change the values accordingly for different result.
Use Cases:
There are many use cases to transitions, here are a few example:
- Death Screen
- Loading Screen
- Teleportation screen
- Flashbacks
- Intros & Outros.
And many more! Creativity is the key.
Here are a few code examples:
1. Fade out on Part touch
Local Script:
local debounce = false
local module = require(game:GetService("ReplicatedStorage").Transitions) --Get the function table
local part = workspace:WaitForChild("FadeInOutPart") --Path to your part.
part.Touched:Connect(function(hit)
local player = game:GetService("Players"):GetPlayerFromCharacter(hit:FindFirstAncestorOfClass("Model"))
if(debounce == false and player == game:GetService("Players").LocalPlayer) then --If debounce is false and the touch is a player then
debounce = true
local tween1 = module.FadeOut(game:GetService("Lighting").FadeInOut) --Run the Fade-Out function that returns the tween
tween1.Completed:Wait() --Wait until the tween is completed
wait(1) -- Wait before tweening back
local tween2 = module.FadeIn(game:GetService("Lighting").FadeInOut) --Run the Fade-Out function that returns the tween
tween2.Completed:Wait() --Wait until the tween is completed
print("Done fading")
wait(0.5)
debounce = false
end
end)
2. Fade out on Death
Local script in StarterPlayerScripts:
local plr = game:GetService("Players").LocalPlayer --Get the player
local transitions = require(game:GetService("ReplicatedStorage"):WaitForChild("Transitions")) --Load the transition functions.
local colorCorrectionObject = game:GetService("Lighting"):WaitForChild("FadeInOut") --Path to your ColorCorrectionEffect.
plr.CharacterAdded:Connect(function(char) --When character is spawned
wait(1) --Short wait before fade in.
transitions.FadeIn(colorCorrectionObject) --Fade in
local hum = char:WaitForChild("Humanoid") --Wait until the humanoid exists.
hum.Died:Connect(function() --When the player dies
transitions.FadeOut(colorCorrectionObject) --Fade out
end)
end)
--Note: You don't have to worry about the humanoid function being stored in memory since connections are disconnected when something is destroyed.
You can use the function from the server as well to make transitions for all of the players. Or use a remote event and :FireAllClients()
Edit History:
-
Edit 6/27/20: Removed Poll, please provide only Constructive criticism/feedback, not just bad votes.
-
Edit 5/16/21: Added some better formatting and wording
-
Edit 5/16/21: Renewed the videos and added more code examples.
If you have any feedback or suggestions, or anything to correct, please let me know 
. Constructive Feedback is highly appreciated.
.