Is it possible to tween image transparency?

Help and Feedback Scripting Support
#1

Hello, I would like to know how can I tween image transparency. I was searching for it on a dev forum for a long time, and I couldn’t find it.

2 Likes
#2

Yes it is. You should better search on the devhub

1 Like
#3

I was searching for it, but when importing the script, it didn’t work. The image just showed without tweening.

#4

https://developer.roblox.com/en-us/articles/GUI-Animations

Put this LocalScript inside of your Frame/Image

local TweenService = game:GetService("TweenService")
 
local frame = script.Parent

local newTransparency = 1

local tweenInfo = TweenInfo.new(15, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
local tween = TweenService:Create(frame, tweenInfo, {Transparency = newTransparency, ImageTransparency = newTransparency})

wait(2)

tween:Play()
2 Likes
#5

Did you set the time it takes to tween? Are you sure it starting with visible = false?

#6

Still, image doesnt smooths in, it just shows immediately.

#7

Make sure in studio that the image.visible = true and image.BackgroundTransparency = 1.

Now this is setup to make it so we can tween our image in. Meaning it’ll go from invisible to visible.

Here is some code that will do this for us:

local Image = script.Parent; -- The gui object we want to tween

local TS = game:GetService("TweenService"); -- Getting tween service

local newTransparency = 0; -- 0 meaning fully visible and 1 meaning invisible.

local TweenTime = 5; -- The ammount of time we want this tween to take

local TweenInfo = TweenInfo.new(TweenTime); -- For more info on TweenInfo look at the wiki

local Tween = TS:Create(
   Image, -- The object we want to tween
   TweenInfo, -- The tween info set above
   {
      ImageTransparency= newTransparency -- The property we want to change and what we want to change it to.
   }
);

wait(3); -- Waiting so the clients game can load

Tween:Play(); -- Fianlly, playing our tween!

With this code you should be able to make your GUI tween In!

1 Like
#8

“Transparency”, doesn’t work for imagebels. Tween the ImageTransparency property instead.

2 Likes
#9

I updated my code and it should work now