So, currently I am trying to make a fade in and out button for my UI, but I couldn’t find anything about this on Devforum and YouTube, so could someone please lend me script for that? I have tried using debounces but I used them wrong and it broke the whole script.
2 Likes
Can you please send screenshots of your UI hierarchy? (the tab that says explorer)
2 Likes
local Frame = script.Parent.Parent.Frame --The UI you want to Fade in and out
script.Parent.MouseButton1Click:Connect(function()
if Frame.BackgroundTransparency == 1 then
Frame.BackgroundTransparency = 0.9
wait(0.2)
Frame.BackgroundTransparency = 0.8
wait(0.2)
Frame.BackgroundTransparency = 0.7
wait(0.2)
Frame.BackgroundTransparency = 0.6
wait(0.2)
Frame.BackgroundTransparency = 0.5
wait(0.2)
Frame.BackgroundTransparency = 0.4
wait(0.2)
Frame.BackgroundTransparency = 0.3
wait(0.2)
Frame.BackgroundTransparency = 0.2
wait(0.2)
Frame.BackgroundTransparency = 0.1
wait(0.2)
Frame.BackgroundTransparency = 0
elseif Frame.BackgroundTransparency == 0 then
Frame.BackgroundTransparency = 0.1
wait(0.2)
Frame.BackgroundTransparency = 0.2
wait(0.2)
Frame.BackgroundTransparency = 0.3
wait(0.2)
Frame.BackgroundTransparency = 0.4
wait(0.2)
Frame.BackgroundTransparency = 0.5
wait(0.2)
Frame.BackgroundTransparency = 0.6
wait(0.2)
Frame.BackgroundTransparency = 0.7
wait(0.2)
Frame.BackgroundTransparency = 0.8
wait(0.2)
Frame.BackgroundTransparency = 0.9
wait(0.2)
Frame.BackgroundTransparency = 1
end
end)
If it’s too slow for you liking, mess around with the “wait()”. Have a good day! 
1 Like
Here’s a more compact, but slightly more advanced way to do it.
local Frame = script.Parent.Parent.Frame --The UI you want to Fade in and out
local wtime = 0.2 -- fiddle with this time to make it longer or shorter, the time is in seconds.
script.Parent.MouseButton1Down:Connect(
function()
if Frame.BackgroundTransparency == 1 then
for i = 1, 10 do
task.wait(wtime)
Frame.BackgroundTransparency = Frame.BackgroundTransparency - 0.1
end
elseif Frame.BackgroundTransparency == 0 then
for i = 1, 10 do
task.wait(wtime)
Frame.BackgroundTransparency = Frame.BackgroundTransparency + 0.1
end
end
end
)
3 Likes
It’s good to have a function to toggle this:
local function fade(fadeIn, frame)
if fadeIn then
for i = 1, 10 do
frame.BackgroundTransparency -= .1
task.wait(.01)
end
else
for i = 1, 10 do
frame.BackgroundTransparency += .1
task.wait(.01)
end
end
end
1 Like
You seem to know how to script quite well I see. Since that’s the case, would it be easy for you to explain to me the “for i _ do” property?
I’ve been seeing it a lot and I could never understand it. If you are busy or something, (which is understandablez ofc), I can also watch videos that explain it. Well, I might also use this method in the future (once I understand what the “for I _ do” thing is about). Have a good day buddy!!
1 Like
well, basically:
the i is the index, basically the current number. and that “10” you see next to that is the end number (you can add a third value to these, which will be the increment number, basically how much will the i be bigger/lower, if you won’t write this, then the default increment will be set, which is 1) Basically everything that’s put in the loop will be repeated until the i is equal to the end position. you can try it out with this script:
for count = 1, 10, 1 do
print(count)
end
in the output, you should see the numbers printed after each other.
EDIT: oops i forgot to click the Reply button lol
3 Likes
local Ui = -- path to ui
local function FadeIn()
game:GetService("TweenService"):Create(Ui,Tweeninfo.new(1),{Transparency = 1}):Play()
end
local function FadeOut()
game:GetService("TweenService"):Create(Ui,Tweeninfo.new(1),{Transparency = 0}):Play()
end
while true do
FadeIn()
wait(1)
FadeOut()
wait(1)
end
wrote in devforum fix grammatical errors. thanks
And to the people above me.
for i loops wont make it smooth. It would be extremely choppy. Using tween is a better smoother and more convenient way.
2 Likes
Is there any specific reason why you’ve decided not to use TweenService? It’s pretty efficient and would be great for your use case here. You can use my script below as a roadmap on a particular example which would probably work fine, however I’d recommend changing this up as this isn’t really tested.
local TweenService = game:GetService("TweenService")
local btn = script.Parent.ImageButton -- wherever the button is
local frame = script.Parent -- the things background transparency you're editing
local tweenInfo = TweenInfo.new(2,Enum.EasingStyle.Linear, Enum.EasingDirection.Out)
local open = false
btn.MouseButton1Click:Connect(function()
if open == false then
local openTween = TweenService:Create(frame, tweenInfo, {BackgroundTransparency = 0})
openTween:Play()
openTween.Completed:Connect(function()
open = true
end)
else
local closeTween = TweenService:Create(frame, tweenInfo, {BackgroundTransparency = 1})
closeTween:Play()
closeTween.Completed:Connect(function()
open = false
end)
end
end)
Also a good idea to not have those .Completed where they are in this script however you can fix that up I’m sure.
2 Likes
ok so basically
a lot of programming languages at least use something similar to this property
we can break it down as:
for variable, startnumber, endnumber, increment do
all it really does is count up from startnumber to endnumber, by an increment.
variable
variable can be anything. most people use ‘i’ as their variable, but there’s no problem in using other letters, such as ‘x’ or even phrases, such as ‘anyrandomword’.
startnumber
the number that you want to start counting from. normally this number is 1, and i dont see any reason why it has to be another number, but you can do that if u want.
endnumber
the number you want to finish counting from. this number can literally be any number greater than your startnumber.
e.g. if you were to do for i = 1,3 it is the same as doing for i = 3,5 becuase the difference between both numbers are the same.
still with me?
increment
the number by which the script should count in increments of.
e.g. if you had for i = 1,3,0.5 then this means that the loop will start at 1, and make its way to 3 by counting 0.5 up each cycle.
whew! we did it.
3 Likes
Thank you SOO much. Not only did you reply, but you also explained it really simple and clear. Thanks a lot!! Both you and @BackSpaceCraft. Have a wonderful day!!!
1 Like
No worries. Here’s how your final code should look, adding improvements people suggested.
local function fade(inorout, frame, wtime)
if inorout == "in" then
game:GetService("TweenService"):Create(
frame,
TweenInfo.new(wtime),
{Transparency = 0}
):Play()
elseif inorout == "out" then
game:GetService("TweenService"):Create(
frame,
TweenInfo.new(wtime),
{Transparency = 1}
):Play()
end
end
local frame = script.Parent.Parent.Frame --The UI you want to Fade in and out
script.Parent.MouseButton1Down:Connect(
function()
if frame.BackgroundTransparency == 1 then
fade("out",frame,1) -- the 1 at the end is how many times in seconds in will take to animate. edit this if you want to make it longer or shorter.
elseif frame.BackgroundTransparency == 0 then
fade("in",frame,1) -- the 1 at the end is how many times in seconds in will take to animate. edit this if you want to make it longer or shorter.
end
end
)
have a good day, sir.
3 Likes
Here’s an even better version:
local Frame = script.Parent.Parent.Frame --The UI you want to Fade in and out
local WaitTime = 0.2 -- fiddle with this time to make it longer or shorter, the time is in seconds.
script.Parent.MouseButton1Down:Connect(function()
if Frame.BackgroundTransparency == 1 then
for Index = 1, 0, -0.1 do
task.wait(WaitTime)
Frame.BackgroundTransparency = Index
end
elseif Frame.BackgroundTransparency == 0 then
for i = 1, 10 do
task.wait(WaitTime)
Frame.BackgroundTransparency = Index
end
end
end)
we already been through using for loops, chief.
it’s better to use TweenService for reliability and not lagging the animation
1 Like
yeah because it was helpful. last i checked, you didn’t invent tweenservice.
it didnt occur to me at the time
ofc i didnt what do you expect me to be einstein tough luck for me. and that was a very stupid reply.
if you didnt want to invoke a reaction, don’t reply like that, mate. it’s not that deep
I do understand that, however, I was providing a better version of the script you provided.
I’d rather you learn from what I did differently than you to continue to not use practices to their full potential. Also, please don’t start arguments/drama, thanks.
1 Like
I think the solution is clear, @Qinrir resolved the problem the first by using TweenService. No need to argue or create duplicate posts.
1 Like
thanks for the script
sorry, tbh i despise people who say stuff like that as if they made some kind of breakthrough. enough out of me, tho have a nice day