Making images fade and appear

Okay, so this has been a concern over a cutscene I’v3 been making. The cutscene has three image formatted decals. I made a way to show 10fps solid animations, but is there any way for it to make the image1 fade in then out and the other images. I mean, a way for a script to contain 3 fade ins and 3 fade outs. So the animations could be smoother as the performance does.

5 Likes

Just use TweenService to smoothly tween an animation that you want.

All about TweenService: TweenService | Documentation - Roblox Creator Hub

2 Likes

Well I would like some examples and explanation. I’m not an expert on lua and I know nothing about these fades, so that’s why I ask for help. If you could provide a exampling solution using timed fades (fade in) wait(1) (fade out), all of these in one script too… (Uses transparency)

Well if you are looking for some smooth transitions of fade in or out I’d suggest this code:

function FadeIn() --- FadeIn Effect
for i = 1,25  do
wait()
script.Parent.Transparency = (1-(0.4*i))
end
end

function FadeOut() --- FadeOut Effect
for i = 1,25  do
wait()
script.Parent.Transparency = (0+(0.4*i))
end
end

and the final result to make it work:

wait(1)
FadeIn()
wait(2)
FadeOut()


It’ll look like this

Hope I helped :slight_smile:

1 Like

Well, could you specify a bit more where to insert the cooldowns and how it works? Also the video shows an appearing and dissapearing without fading, instant dissapearing. Why is that so? Note: The transition uses various images and it’s a gui with Images, not Decals.

Well, if it’s a ImageLabel, instead of putting script.Parent.Transparency, you put script.Parent.ImageTransparency. Just wait a little bit and I’ll make the code for the transitions alright?

So, I made a GUI, and I putted 4 ImageLabels, and named them “Image1”,“Image2”,“Image3”,“Image4”. For the perfect transition between them, you’ll need this code right here:

function FadeIn1() --- FadeIn for Image1 Effect
for i = 1,25 do
wait()
script.Parent.Image1.ImageTransparency = (1-(0.05*i))
end
end
--
function FadeOut1() --- FadeOut for Image1 Effect
for i = 1,25 do
wait()
script.Parent.Image1.ImageTransparency = (0+(0.05*i))
end
end
--
function FadeIn2() --- FadeIn for Image2 Effect
for i = 1,25 do
wait()
script.Parent.Image2.ImageTransparency = (1-(0.05*i))
end
end
--
function FadeOut2() --- FadeOut for Image2 Effect
for i = 1,25 do
wait()
script.Parent.Image2.ImageTransparency = (0+(0.05*i))
end
end
--
function FadeIn3() --- FadeIn for Image3 Effect
for i = 1,25 do
wait()
script.Parent.Image3.ImageTransparency = (1-(0.05*i))   
end
end
--
function FadeOut3() --- FadeOut for Image3 Effect
for i = 1,25 do
wait()
script.Parent.Image3.ImageTransparency = (0+(0.05*i))
end
end
--
function FadeIn4() --- FadeIn for Image4 Effect
for i = 1,25 do
wait()
script.Parent.Image4.ImageTransparency = (1-(0.05*i))
end
end
--
function FadeOut4() --- FadeOut for Image4 Effect
for i = 1,25 do
wait()
script.Parent.Image4.ImageTransparency = (0+(0.05*i))
end
end
--
wait(5)
FadeIn1()
wait(1.5)
FadeIn2()
wait(0.5)
FadeOut1()
wait(1.5)
FadeIn3()
wait(0.5)
FadeOut2()
wait(1.5)
FadeIn4()
wait(0.5)
FadeOut3()
wait(2)
FadeOut4()

This was the result:

Hope you understood now :slight_smile:

6 Likes

Thank you, finally I can clean my scripts a little bit and make it more smooth.

1 Like

You are welcome man! Good luck in your project :smiley:

@FadedAnimator Thanks, this really helped me understand different fade in/fade out transitions!

2 Likes

You’re welcome :smiley: ( 30 letters limit… )

You can also tween it for a better result, or if you really into smooth stuff you can use the lerp(a,b,c) for a transition.

Sorry for the 3 year old bump, but is there a way I can make this loop forever? I’m using this function in a loading screen GUI thing and I would like to see if i can be infinetely looped (Unless this is already some sort of loop)

Please don’t do this again, create your post, not sure why that is the answer marked, the correct method do to this is using TweenService

local TweenService = game:GetService("TweenService")
local image = script.Parent --Location to Image

local tween = TweenService:Create(image, TweenInfo.new(1), {ImageTransparency = 1}):Play() -- Set Tween

tween:Play() --Plays the tween

It’s fine I already solved it. I used a while true loop thing. Also don’t do what again?

Firstly, don’t use the while loop for stuff like this while the TweenService exists, as it uses much more performance than TweenService. Secondly, I meant don’t necropost, which is replying to extremely old posts which are solved which brings them to the top of the list.

1 Like