How would I modularise tweens to perform multiple fade in and fade out transitions for varying groups of objects in a script?

Help and Feedback Scripting Support
, ,
#1

I would like to optimise my scripts by replacing for loops with tweens, however I want to ensure my code remains easily readable and doesn’t repeat code.
Therefore I would like to figure out how to create a function that creates tweens to fade in and out a varying list of different UI objects and specific properties for each one.

The function needs to be able to handle different properties to fade (for example background transparency, text transparency) and needs to be able to take a varying number of objects and their properties to fade in the same tween (is that even possible?)

I also have many instances where some objects fade out while others fade in at the same time, would this be possible with this modularised tween function? I don’t have much experience with tweens so I don’t know how to execute this.

.

Please expect replies to take awhile, so if at all possible ensure your replies are detailed and compensate for many potential answers. I’d also appreciate if you add comments to code snippets!

2 Likes
#2

For me, I always have a tween module function on my personal toolbox.

Example → in module script:

local Ui = {}

local TweenService = game:GetService("TweenService")

function Ui.TweenPosition(Gui : Frame, Time : number, Style : Enum.EasingStyle, Direction : Enum.EasingDirection, Pos : UDim2)
	local Info = TweenInfo.new(Time, Style, Direction)
	local Goals = {Position = Pos}
	local Start = TweenService:Create(Gui, Info, Goals)
	Start:Play()
end

function Ui.TweenRotation(Gui : Frame, Time : number, Style : Enum.EasingStyle, Direction : Enum.EasingDirection, Rot : number)
	local Info = TweenInfo.new(Time, Style, Direction)
	local Goals = {Rotation = Rot}
	local Start = TweenService:Create(Gui, Info, Goals)
	Start:Play()
end

function Ui.TweenSize(Gui : Frame, Time : number, Style : Enum.EasingStyle, Direction : Enum.EasingDirection, Scale : UDim2)
	local Info = TweenInfo.new(Time, Style, Direction)
	local Goals = {Size= Scale}
	local Start = TweenService:Create(Gui, Info, Goals)
	Start:Play()
end

return Ui

For custom use:

function Ui.TweenName(Gui : Frame , Time : number, Style : Enum.EasingStyle, Direction : Enum.EasingDirection, Variable)
	local Info = TweenInfo.new(Time, Style, Direction)
	local Goals = {ToChange = Variable} -- Where "ToChange" can be change to any type of properties that can be changed (e.g Transparency, Offset, etc.)
	local Start = TweenService:Create(Gui, Info, Goals)
	Start:Play()
end

In your script:

local Tween = require(game:GetService("ReplicatedStorage"):WaitForChild("Tween"))
-- Getting the module script

local Player = game:GetService("Players").LocalPlayer
local PlayerGui = Player.PlayerGui

local Frame = PlayerGui:WaitForChild("ScreenGui").Frame
-- Example Frame

task.wait(3)

Tween.TweenPosition(Frame, 2.5, Enum.EasingStyle.Quad, Enum.EasingDirection.Out, UDim2.new(0, 0, 0, 0))
Tween.TweenSize(Frame, 2.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.In, UDim2.new(1, 0, 1, 0))
-- Using 2 Tweens at the same time

Tween.TweenName(FrameToChange, Time, Easing Style, Easing Direction, Final Variable)

Result:

It may seem like the change in size happens after the position; however, fear not as that only looks like it due to the easing style and direction.

2 Likes