How to make for loops a set time?

[Blumaimn2 (Beans2)]

Hi there Other Developers,
I’ve been running into this problem where for “i” loops don’t last a certain length, as they are dependent on your fps.

For example:

for i=0, 1, 0.01 do
   UI.Transparency = i
end

You can see that the code above runs at different speeds depending on the player’s fps, on my 60fps laptop It ran for 1.2 seconds but on my desktop is looping through it at around 0.05 seconds.

I’ve had some trouble figuring out how to prevent this form happening, thanks a lot!

[Forummer]

local t = 0
while true do
    t += task.wait()
    UI.Transparency = t
    if t > 1 then break end
end

[UIScript]

Just a reminder that you can just replace the condition in the while loop itself!

local t: number = 0

while t < 1 do
    t += task.wait()
    UI.Transparency = math.clamp(t, 0, 1)
end

[arbitiu (arbi)]

i don’t know if that use case is just for the sake of your example, but the better way to do this is animating the tranparency with a tween

[Forummer]

I prefer the style of a while true do loop and breaking inside of the loop.
UI.Transparency = math.clamp(t, 0, 1)
Roblox’s internal engine already handles the clamping of the ‘Transparency’ property.

[UIScript]

Oh does it? That is good to know.

[StrongBigeMan9]

The solutions provided by the other users in this thread should work if you want to continue using loops for updating certain properties of the UI, but an alternative one I’ll mention (since it may be suitable for use cases where you want to customize it further with different animation easing options and / or to more easily update multiple properties at the same time) would be to utilize the TweenService.

Example

local TweenService = game:GetService("TweenService")

local UI = script.Parent -- Example reference to UI object

local tweenInfo = TweenInfo.new(
	2, -- Amount of time it takes to complete the animation
	Enum.EasingStyle.Sine,
	Enum.EasingDirection.Out
-- Visualization of the Easing Options can be found on the Roblox Creator Documentation site (which is hyperlinked above at "animation easing options")
)
local goal = {Transparency = 1}

local tween = TweenService:Create(UI, tweenInfo, goal)
tween:Play()
tween.Completed:Wait() -- Optional, if you want to wait for it to finish playing before continuing with the rest of the code

[GamblingMaster69 (everysinglething)]

The correct way to do this will be:

for i = 1,25 do -- Change 25 to how much times do you want it to loop
UI.BackgroundTransparency += 0.01 -- Use BackgroundTransparency for the transparency to increase in background, For stuff like buttons or texts you can use TextTransparency. you can put += for it to increase transparency and -= to decrease
task.wait(0.01) -- Change 0.01 to how fast will the loop execute in seconds, If you want to make it insanely smooth you can change for i = 1,25 to like for i = 1,100 and make the wait be 0.001)
end

I hope this helps!