How to Make Something Fade In/Out With Tween Service?

Help and Feedback Scripting Support
#1

This would be specifically involving a GUI. I have a menu with teleports and essentially when someone clicks on something in the menu, it’ll pop up this loading screen:

Screenshot 2023-05-14 220924
Screenshot 2023-05-14 220924839×478 15.7 KB

Then a few seconds later it’ll go away and teleport to that section. This Gui is a frame that holds two images and two text labels.
Capture5
My script is this:

local Fruit = script.Parent.Parent.Parent.Parent.LoadingFruit
local Topics = script.Parent.Parent.Parent.Parent.TopicsFrame

script.Parent.MouseButton1Click:Connect(function()
	Topics.Visible = false
	Fruit.Visible = true
	script.Parent.Click:Play()
	local player = game.Players.LocalPlayer
	player.Character.HumanoidRootPart.CFrame = CFrame.new(-48.8, -34, -5.7)
	wait(4)
	Fruit.Visible = false
end)

The topics frame is the menu itself. I just want to know how I would incorporate a fading in and out transition with tween service because I am not entirely sure how to achieve that specifically. Thanks to anyone that helps!

1 Like
#2

A tween object can be created using TweenService:Create().

It’ll require 3 parameters:

The first being the object you want to tween

The second being all the information on how the tween will look (using TweenInfo.new())

and the goal, which is a table that has the properties that you want to change and its final value.

it’d look somewhat like this:

local tweenService = game:GetService("TweenService")

local tweenLook = TweenInfo.new(1,Enum.EasingStyle.Quart,Enum.EasingDirection.In)

local tweenGoal = {BackgroundTransparency = 1}

local tweenObject = tweenService:Create(LoadingFruit,tweenLook,tweenGoal)

tweenObject:Play()

You can look into TweenInfo to tweak the specific appearance that you want to achieve, like how fast it does it, and what motion it achieves it in (Sine, Quart, etc.).

1 Like
#3

here’s the documentation on TweenService if you haven’t read it already

local player = game.Players.LocalPlayer -- keep localplayer outside
local character = player.Character or player.CharacterAdded:Wait() -- wait for the character properly

-- i would use FindFirstAnscestor to avoid using .Parent so many times
local Holder = script:FindFirstAnscestor("HolderName") -- get the Frame that's holding LoadingFruit and Topics
local Fruit = Holder.LoadingFruit
local Topics = Holder.TopicsFrame
local Button = script.Parent

-- get tweenservice and make tweeninfo
local TS = game:GetService("TweenService")
local tInfo = TweenInfo.new(
	2, -- Time/Speed
	Enum.EasingStyle.Quint, -- EasingStyle
	Enum.EasingDirection.Out, -- EasingDirection
	0, -- RepeatCount (when less than zero the tween will loop indefinitely)
	false, -- Reverses (tween will reverse once reaching it's goal)
	0 -- DelayTime
)

-- make your tweens
local FadeIn = TS:Create(Fruit, tInfo, {BackgroundTransparency = 0})
local FadeOut = TS:Create(Fruit, tInfo, {BackgroundTransparency = 1})

--Transition should already be visible so you can fade

Button.MouseButton1Click:Connect(function()
	Button.Click:Play()
	FadeIn:Play() 
	character.HumanoidRootPart.CFrame = CFrame.new(-48.8, -34, -5.7)
	wait(4)
	Topics.Visible = false
	FadeOut:Play() 
end)
1 Like
#4

I usually never play with GUI tweening… So I saw your post and replies and I wanted to give it a try.

@rvaee and @BonesIsUseless already explained all the basics you need to use the TweenService, but forgot to mention that you should create one Tween per ImageLabel per Button per TextLabel etc that is inside your Frame, otherwise only the main Frame will tween and the rest of components inside of it wont…

But, manually create a tween per component and play them all hardcoded is not efficient and will result in a timeConsuming long script. Plus, depending on the component you would wish to tween the ImageTransparency property or the TextTransparency or the BackgroundTransparency property, and if you try to tween a property that a gui component doesnt have that will cause an error.

So I made this script that does that stuff, checking the properties of each component, creating a tween per component with the right properties to tween, excluding the ones that are transparency = 1 from the original gui setup, and play all tweens at the same time to fadeIn and out, heres a video:
(I like that apple, thats another reason why I wanted to provide some help, and I kinda recreated your splash screen)

The script:

local TS = game:GetService("TweenService")

-- LoadingFruit Frame
local LoadingFruitGUI = script.Parent:WaitForChild("LoadingFruit") -- Your Frame
-- Button
local Button = script.Parent:WaitForChild("ImageButton") -- A button I created to test it

-- Tween config
local Info = TweenInfo.new(2) -- This is 2 seconds, add the other values to customize the Tween behaviour

-- Function to check if an instance has a specific property
function hasProperty(obj, prop)
	local success, _ = pcall(function() 
		obj[prop] = obj[prop]
	end)
	if success and obj[prop] ~= 1 then -- If its not originally transparent
		-- Optionally set all Transparencies to starting point 1 to hide them
		obj[prop] = 1
		return success
	else
		return false
	end
end

-- Properties to be checked in each Gui component
local PossibleProperties = {"ImageTransparency", "BackgroundTransparency", "TextTransparency"}

local TweenTable_FadeIN = {} -- Table holding all Tweens FadeIn
local TweenTable_FadeOUT = {} -- Table holding all Tweens FadeOut

-- Function to create Tweens
local function CreateTweens(obj)
	local FadeIN = {}
	local FadeOut = {}
	
	for _, prop in pairs(PossibleProperties) do
		if hasProperty(obj, prop) then
			FadeIN[prop] = 0
			FadeOut[prop] = 1
		end
	end
	
	table.insert(TweenTable_FadeIN, TS:Create(obj, Info, FadeIN))
	table.insert(TweenTable_FadeOUT, TS:Create(obj, Info, FadeOut))
end

-- Create multiple Tweens one per GUI component
for _, obj in pairs(LoadingFruitGUI:GetDescendants()) do
	CreateTweens(obj)
end
CreateTweens(LoadingFruitGUI) -- Create tween for one Frame

local btnDebounce = false
Button.Activated:Connect(function()
	if not btnDebounce then
		LoadingFruitGUI.Visible = true
		
		local tweenDebounce = false
		btnDebounce = true
		for _, tween in pairs(TweenTable_FadeIN) do
			if not tweenDebounce then
				tweenDebounce = tween
			end
			tween:Play()
		end
		tweenDebounce.Completed:Wait()
		
		-- The TP
		game.Players.LocalPlayer.Character.HumanoidRootPart.CFrame = CFrame.new(100,5,100)
		task.wait(1) -- Extra wait time for splash window
		
		tweenDebounce = false
		for _, tween in pairs(TweenTable_FadeOUT) do
			if not tweenDebounce then
				tweenDebounce = tween
			end
			tween:Play()
		end
		tweenDebounce.Completed:Wait()
		LoadingFruitGUI.Visible = false
		btnDebounce = false
	end
end)

Just change the lines referencing the LoadingFruit frame and button, tell me if you have issues to make it work. :yum:

2 Likes
#5

thought you could just use a canvasgroup :man_shrugging:

1 Like
#6

Aaaaaaaaaaaa… hahah thats so true… I forgot that existed… :roll_eyes:
A proof Im not really into GUI tweening :joy:

Totally, the canvasGroup will do all the work… but, well… it was a good exercise

1 Like
#7

@rvaee @BonesIsUseless @Dev_Peashie Thank you guys so much for the references and examples! I’ll attempt to use each of these later today when I get back on studio. To be honest I had skimmed over the documentation of Tween Service and went through many tutorials on Youtube but it seemed a bit too complicated for my understanding. But you three really broke it down for me in a way that made it easier for me to grasp which is much appreciated :smiley: I’ll check back in if I have any questions! Thanks again :smiley:

2 Likes