Open-Sourced UI Fading Module

Resources Community Resources
#1

UI Fade Module

Get

This wonderful module was created by @7kayoh, but she has granted me permission to share it with you all!

Source 
local module = {}

local TweenService = game:GetService("TweenService")

local function GetProperty(Object)
	if Object:IsA("TextLabel") or Object:IsA("TextButton") or Object:IsA("TextBox") then
		return "TextTransparency"
	elseif Object:IsA("ViewportFrame") or Object:IsA("ImageButton") or Object:IsA("ImageLabel") then
		return "ImageTransparency"
	elseif Object:IsA("Frame") then
		return "BackgroundTransparency"
    elseif Object:IsA("ScrollingFrame") then
		return "ScrollBarImageTransparency"
	end
end

function module.FadeIn(Object, FadeTime)
	local TI = TweenInfo.new(FadeTime, Enum.EasingStyle.Linear, Enum.EasingDirection.Out)
	local Table = Object:GetDescendants()
	Table[#Table + 1] = Object
	for i,v in pairs(Table) do
		local Property = GetProperty(v)

		if Property then
			if v:FindFirstChild("DefaultTransparencyValue") then
				TweenService:Create(v, TI, {[Property] = v:FindFirstChild("DefaultTransparencyValue").Value}):Play()
			else
				local DefaultTransparencyValue = Instance.new("NumberValue")
				DefaultTransparencyValue.Name = "DefaultTransparencyValue"
				DefaultTransparencyValue.Value = v[Property]
				DefaultTransparencyValue.Parent = v

				v[Property] = 1
				TweenService:Create(v, TI, {[Property] = v:FindFirstChild("DefaultTransparencyValue").Value}):Play()
			end
		end
		Property = nil
	end
	TI = nil
	Table = nil
end

function module.FadeOut(Object, FadeTime)
	local TI = TweenInfo.new(FadeTime, Enum.EasingStyle.Linear, Enum.EasingDirection.Out)
	local Table = Object:GetDescendants()
	Table[#Table + 1] = Object
	for i,v in pairs(Table) do
		local Property = GetProperty(v)

		if Property then
			if v:FindFirstChild("DefaultTransparencyValue") then
				TweenService:Create(v, TI, {[Property] = 1}):Play()
			else
				local DefaultTransparencyValue = Instance.new("NumberValue")
				DefaultTransparencyValue.Name = "DefaultTransparencyValue"
				DefaultTransparencyValue.Value = v[Property]
				DefaultTransparencyValue.Parent = v
				TweenService:Create(v, TI, {[Property] = 1}):Play()
			end
		end
		Property = nil
	end
	TI = nil
	Table = nil
end

return module

How does it work? How do I use it?

It’s quite simple. Once you require the module, all you have to do is call the FadeIn and FadeOut functions:

local FadeModule = require(game:GetService("ReplicatedStorage").FadeModule)
local Object = Path.To.UI

FadeModule.FadeIn(Object, 2)
FadeModule.FadeOut(Object, 2)

The two functions are extremely straight forward, and both work the same way:
Examples of usage are shown above.

FadeIn(instance : Object, int : Duration)
FadeOut(instance : Object, int : Duration)

Calling a fade function on a UI instance will automatically fade the children of the UI, all in one simple line without the need to call it on any other element.
Calling FadeIn will remember the instance’s original transparency value.

The module is not fading a certain element of my UI!

Not every single object that is able to be used in UI is pre-defined. If you notice that one is missing and won’t fade, add to the bottom of the GetProperty function in the source code with the following:

elseif Object:IsA("ClassName") then
	return "Property"
Example 
elseif Object:IsA("ScrollingFrame") then
	return "ScrollBarImageTransparency"

Let me know if you experience any issues with this module, however let’s not steal the credit from our almighty nanako who created this :clap:

10 Likes
#2

Why use this over your own tweens? All this has is custom speed, so it feels pretty useless. Making your own tween might just be a line code more. I’d say to make this a bit more useful, let people set EasingStyle and EasingDirection.

For those who are really lazy though, good job.

3 Likes
#3

Why not to add EasingStyle and EasingDirection? It is very easy to implement.

#4

This happens to be very similar to an implementation made by Kohl. I do agree with HedTB_Dev that the fade should be more customizable.

local function GetProperty(Object)
	if Object:IsA("TextLabel") or Object:IsA("TextButton") or Object:IsA("TextBox") then
		return "TextTransparency"
	elseif Object:IsA("ViewportFrame") or Object:IsA("ImageButton") or Object:IsA("ImageLabel") then
		return "ImageTransparency"
	elseif Object:IsA("Frame") then
		return "BackgroundTransparency"
	elseif Object:IsA("ScrollingFrame") then
		return "ScrollBarImageTransparency"
	elseif Object:IsA("UIStroke") then 
		return "Transparency"
	end
end

I’d say this is incorrect usage of IsA, but if not, the code can be improved anyways.

You should store the Instance’s ClassName:

local function GetProperty(Object)
    local ClassName = Object.ClassName;
end

From here on, you can do the if statements, but without the use of IsA.

local function GetProperty(Object)
    local ClassName = Object.ClassName;

    if (ClassName == "TextLabel" or ClassName == "TextButton" or ClassName == "TextBox") then
        return "TextTransparency";
    elseif (ClassName == "ViewportFrame" or ClassName == "ImageButton" or ClassName == "ImageLabel") then
        return "ImageTransparency";
    elseif (ClassName == "Frame") then
        return "BackgroundTransparency";
    elseif (ClassName == "ScrollingFrame") then
        return "ScrollBarImageTransparency";
    elseif (ClassName == "UIStroke") then
        return "Transparency";
    end

    return nil;
end

Why doesn’t the switch statement exist yet…

I believe this should be moved to #help-and-feedback:creations-feedback as this resource doesn’t meet the criteria, in my opinion.

3 Likes
#5

Using your own tweens would look something like this:

for i,v in pairs(Frame:GetDescendants()) do
  if v.ClassName == "Frame" then
    v.BackgroundTransparency = 1
  elseif v.ClassName == "Blah Blah" then
    blah.Blah = 1
  end
end

Correct me if I’m wrong, essentially a repeat of the start of the module source code.

@NeoBuilds You are able to set the EasingDirection/Style on line 18 of the module, I see no need to incorporate custom directions/styles into the module’s fade functions as it just doesn’t look good in any style other than linear; fading itself is the aesthetic compared to if you were tweening a frame’s position (in which case the easing style would be important)

#6

I see no reason to use ClassName over :IsA, if we’re going to talk performance the impact is insanely non-impactable.
If you have further reasoning, I’m open to hear it.

#7

Oh, I guess you’re right. IsA happens to be faster than using ClassName. Thanks for showing me this.

Is this resource useful to most people? Or is it rather specific?

#8

I seem to be having issues when using this module for what appears to be no reason. I’ll show my code so that you can debug it.

local TextButton = script.Parent
local Fade = require(script.Parent.Parent.Parent.Modules.Fade)
local Frame = script.Parent.Parent.Parent.Frame

TextButton.MouseButton1Click:Connect(function()
	Fade:FadeOut(Frame, 3)
end)

For some reason, this completely fails to work and does nothing when I click the button. Any reason why?

#9

No. This is not how you fade frames, this simply makes the background invisible right away. You need to create a tween with TweenService and tween the background transparencies.

#10

I am fully aware. This module just simply condenses what you would do regularly into one line, saving you the trouble of copy pasting a tween 10 times.

#11

To call a fade function, you must use a full stop operator rather than colon, Fade.FadeOut(Frame, 3)

#12

I added support for TextStrokeTransparency because if you only fade TextTransparency and the TextStrokeTransparency is set to 0 with text stroke color black when you tween the text will turn black and disappear instead of fading away

This is my code (I speed edited it so the code might be messy and some bad practices but at least it works)

--Ignore prints, I added it for debugging
--Original creator: Puppy_Ryan
--Edited by iUnstable0 on march 10th 2022 10:31 PM

--Added support for text stroke transparency for textlabels, textboxes, and textbuttons

local module = {}

local TweenService = game:GetService("TweenService")

local function GetProperty(Object)
	if Object:IsA("TextLabel") or Object:IsA("TextButton") or Object:IsA("TextBox") then
		return {"TextTransparency", "TextStrokeTransparency"}
	elseif Object:IsA("ViewportFrame") or Object:IsA("ImageButton") or Object:IsA("ImageLabel") then
		return "ImageTransparency"
	elseif Object:IsA("Frame") then
		return "BackgroundTransparency"
	elseif Object:IsA("ScrollingFrame") then
		return "ScrollBarImageTransparency"
	elseif Object:IsA("UIStroke") then 
		return "Transparency"
	end
end

function module.FadeIn(Object, FadeTime)
	local TI = TweenInfo.new(FadeTime, Enum.EasingStyle.Linear, Enum.EasingDirection.Out)
	local Table = Object:GetDescendants()
	Table[#Table + 1] = Object
	for i,v in pairs(Table) do
		local Property = GetProperty(v)

		if Property then
			if typeof(Property) == "table" then
				--print("FADER")
				if v:FindFirstChild("DefaultTransparencyValue") then
					--print("YES")
					for a1, b1 in ipairs(Property) do
						--print(b1)
						--print(v:FindFirstChild("DefaultTransparencyValue").Value)
						--print(tonumber(string.split(v:FindFirstChild("DefaultTransparencyValue").Value, ",")[a1]))
						TweenService:Create(v, TI, {[b1] = tonumber(string.split(v:FindFirstChild("DefaultTransparencyValue").Value, ",")[a1])}):Play()
					end
				else
					--print("NOPE")
					local DTV = ""

					for a1, b1 in ipairs(Property) do
						DTV ..= tostring(v[b1])

						if a1 ~= #Property then
							DTV ..= ","
						end
					end
					--print(DTV)

					local DefaultTransparencyValue = Instance.new("StringValue")
					DefaultTransparencyValue.Name = "DefaultTransparencyValue"
					DefaultTransparencyValue.Value = DTV
					DefaultTransparencyValue.Parent = v

					for a1, b1 in ipairs(Property) do
						--print(b1)
						--print(tonumber(string.split(v:FindFirstChild("DefaultTransparencyValue").Value, ",")[a1]))
						v[b1] = 1
						TweenService:Create(v, TI, {[b1] = tonumber(string.split(v:FindFirstChild("DefaultTransparencyValue").Value, ",")[a1])}):Play()
					end
				end
			else
				if v:FindFirstChild("DefaultTransparencyValue") then
					TweenService:Create(v, TI, {[Property] = tonumber(v:FindFirstChild("DefaultTransparencyValue").Value)}):Play()
				else
					local DefaultTransparencyValue = Instance.new("StringValue")
					DefaultTransparencyValue.Name = "DefaultTransparencyValue"
					DefaultTransparencyValue.Value = v[Property]
					DefaultTransparencyValue.Parent = v

					v[Property] = 1
					TweenService:Create(v, TI, {[Property] = tonumber(v:FindFirstChild("DefaultTransparencyValue").Value)}):Play()
				end
			end
		end
		Property = nil
	end
	TI = nil
	Table = nil
end

function module.FadeOut(Object, FadeTime)
	local TI = TweenInfo.new(FadeTime, Enum.EasingStyle.Linear, Enum.EasingDirection.Out)
	local Table = Object:GetDescendants()
	Table[#Table + 1] = Object
	for i,v in pairs(Table) do
		local Property = GetProperty(v)

		if Property then
			if typeof(Property) == "table" then
				if v:FindFirstChild("DefaultTransparencyValue") then
					for a1, b1 in ipairs(Property) do
						TweenService:Create(v, TI, {[b1] = 1}):Play()
					end
				else
					local DTV = ""

					for a1, b1 in ipairs(Property) do
						DTV ..= tostring(v[b1])

						if a1 ~= #Property then
							DTV ..= ","
						end
					end

					local DefaultTransparencyValue = Instance.new("StringValue")
					DefaultTransparencyValue.Name = "DefaultTransparencyValue"
					DefaultTransparencyValue.Value = DTV
					DefaultTransparencyValue.Parent = v

					for a1, b1 in ipairs(Property) do
						TweenService:Create(v, TI, {[b1] = 1}):Play()
					end
				end
			else
				if v:FindFirstChild("DefaultTransparencyValue") then
					TweenService:Create(v, TI, {[Property] = 1}):Play()
				else
					local DefaultTransparencyValue = Instance.new("StringValue")
					DefaultTransparencyValue.Name = "DefaultTransparencyValue"
					DefaultTransparencyValue.Value = v[Property]
					DefaultTransparencyValue.Parent = v
					TweenService:Create(v, TI, {[Property] = 1}):Play()
				end
			end
		end
		Property = nil
	end
	TI = nil
	Table = nil
end

return module

https://www.roblox.com/library/9061558685/Better-UI-Fade-Module

#14 
local module = {}

local TweenService = game:GetService("TweenService")

local function GetProperty(Object)
	if Object:IsA("TextLabel") or Object:IsA("TextButton") or Object:IsA("TextBox") then
		return "TextTransparency"
	elseif Object:IsA("ViewportFrame") or Object:IsA("ImageButton") or Object:IsA("ImageLabel") then
		return "ImageTransparency"
	elseif Object:IsA("Frame") then
		return "BackgroundTransparency"
	elseif Object:IsA("ScrollingFrame") then
		return "ScrollBarImageTransparency"
	elseif Object:IsA("UIStroke") then 
		return "Transparency"
	end
end

function module.FadeIn(Object, FadeTime, EasingStyle: Enum.EasingStyle, EasingDirection: Enum.EasingDirection)
	local TI = TweenInfo.new(FadeTime, EasingStyle or Enum.EasingStyle.Linear, EasingDirection or Enum.EasingDirection.Out)
	local Table = Object:GetDescendants()
	Table[#Table + 1] = Object
	for i,v in pairs(Table) do
		local Property = GetProperty(v)

		if Property then
			if v:FindFirstChild("DefaultTransparencyValue") then
				TweenService:Create(v, TI, {[Property] = v:FindFirstChild("DefaultTransparencyValue").Value}):Play()
			else
				local DefaultTransparencyValue = Instance.new("NumberValue")
				DefaultTransparencyValue.Name = "DefaultTransparencyValue"
				DefaultTransparencyValue.Value = v[Property]
				DefaultTransparencyValue.Parent = v

				v[Property] = 1
				TweenService:Create(v, TI, {[Property] = v:FindFirstChild("DefaultTransparencyValue").Value}):Play()
			end
		end
		Property = nil
	end
	TI = nil
	Table = nil
end

function module.FadeOut(Object, FadeTime, EasingStyle: Enum.EasingStyle, EasingDirection: Enum.EasingDirection)
	local TI = TweenInfo.new(FadeTime, EasingStyle or Enum.EasingStyle.Linear, EasingDirection or Enum.EasingDirection.Out)
	local Table = Object:GetDescendants()
	Table[#Table + 1] = Object
	for i,v in pairs(Table) do
		local Property = GetProperty(v)

		if Property then
			if v:FindFirstChild("DefaultTransparencyValue") then
				TweenService:Create(v, TI, {[Property] = 1}):Play()
			else
				local DefaultTransparencyValue = Instance.new("NumberValue")
				DefaultTransparencyValue.Name = "DefaultTransparencyValue"
				DefaultTransparencyValue.Value = v[Property]
				DefaultTransparencyValue.Parent = v
				TweenService:Create(v, TI, {[Property] = 1}):Play()
			end
		end
		Property = nil
	end
	TI = nil
	Table = nil
end

return module

Custom EasingStyle, and EasingDirection.
Not that hard to add.

1 Like