How do I tween transparency?

Help and Feedback Scripting Support
,
#1

Hello. I would like to create a GUI that will fade to transparency 1 using a tween. I’m aware of :TweenSize, :TweenPosition, :TweenSizeAndPosition, but I’m not aware of any ways to tween transparency. Does anyone have any ideas on how to tween a transparency of a GUI?

2 Likes
#2

You should utilize TweenService. This service allows you to tween properties of instances.

https://developer.roblox.com/en-us/api-reference/class/TweenService

Here’s an example script. You can test this out by putting this script in ServerScriptService and hitting Run. It should create a part at position (0, 5, 0) which changes from opaque to completely transparent over a duration of 4 seconds.

-- Script in ServerScriptService
local TweenService = game:GetService("TweenService")

local part = Instance.new("Part", workspace)
part.Anchored = true
part.Position = Vector3.new(0, 5, 0)

local info = TweenInfo.new(4, Enum.EasingStyle.Linear, Enum.EasingDirection.In, 0, false, 0)

local tween = TweenService:Create(part, info, {Transparency = 1})

tween:Play()
1 Like
#3
1 Like
#4

You can use a for i, v in pair loop to get the transparency, but it isn’t really that great and will take a bit of time for it to do it, and won’t run the script instantly

#5

This setup requires TweenService to tween properties

You have to create a TweenInfo and Tween variable so you can use it for Functions in your code.

When a tween variable is created, you can use it to play animations (This is way smoother than using Count time and task.wait() )

#6

You will need to use TweenService, namely TweenService:Create()
(I wrote this in here so expect some misspells)
Example For the fade out…

local tweenService = game:GetService("TweenService")

local guiObject = script.Parent --Or Wherever You Placed It

local tweenInfo = TweenInfo.new(
	.5, -- Time For Tween
	Enum.EasingStyle.Sine,  -- EasingStyle
	Enum.EasingDirection.InOut,  -- EasingDirection
	0,  -- Number of repeats
	false,  -- whether it reverses Or oot
	0 -- Time between each "repeat"
)

local propertiesToChange = {
	BackgroundTransparency = 1
	-- Size = UDim2.new()
	-- Position = UDim2.new()
	-- Rotation = Number
	-- BackgroundColor3 = Color3.FromRGB()
	-- etc.
}

local tween = tweenService:Create(guiObject , tweenInfo , propertiesToChange)

tween:Play()
-- tween.Completed:Wait()

If you have some elements inside, and wanted them to fade out as well, you’ll need to use a for loop:

local tweenService = game:GetService("TweenService")

local guiObject = script.Parent --Or Wherever You Placed It

local tweenInfo = TweenInfo.new(
	.5, -- Time For Tween
	Enum.EasingStyle.Sine,  -- EasingStyle
	Enum.EasingDirection.InOut,  -- EasingDirection
	0,  -- Number of repeats
	false,  -- whether it reverses Or oot
	0 -- Time between each "repeat"
)

local propertiesToChange = {
	BackgroundTransparency = 1
	-- Size = UDim2.new()
	-- Position = UDim2.new()
	-- Rotation = Number
	-- BackgroundColor3 = Color3.FromRGB()
	-- etc.
}

for i, v in pairs(guiObject:GetDescendants()) do
	if not v:IsA("GuiObject") then continue end
	if v.BackgroundTransparency == 1 then continue end
	
	local tween = tweenService:Create(v , tweenInfo , propertiesToChange)
	tween:Play()
	--// Tween.Completed:Wait() \\--
end

Hope this helped! You can further contact me if you have any questions.

7 Likes
So Im trying to tween a ui But cant figure out how
#7

I didn’t write TextColor3, ImageColor3, TextTransparency or ImageTransparency; not all GuiObjects have them, you can still tween them though.

1 Like