How to get a UI effect like this?

Help and Feedback Scripting Support
1

How would I get a UI Fade/tween effect similar to this? Can’t seem to find anything on here, and nothing is helping lol

1 Like
2

Simply Tween the UIObject’s BackgroundTransparency with a short tween time. If you have children parented to it, you can loop through them in order to maintain consistency.

-- LocalScript

local TweenService = game:GetService("TweenService")

local BackgroundFrame = script.Parent
local tweenInfo = TweenInfo.new(0.1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out)

local function fadeIn(Frame)
	TweenService:Create(Frame, tweenInfo, {BackgroundTransparency = 0}):Play()
end

local function fadeOut(Frame)
	TweenService:Create(Frame, tweenInfo, {BackgroundTransparency = 1}):Play()
end
3

Looks like a mix of Tweening Size and Transparency, but both Tweens are done fast so it creates that effect, simple to make really, and especially if your using CanvasGroup Frames. For example:

TweenService:Create(YourCanvasGroup, TweenInfo.New(.125, Enum.EasyingStyle.Quint, Enum.EeasyingDirection.Out), {GroupTransparency = 1, Size = Udim2.FromScale(.25, .25)}):Play()

Not perfect, but its just an example.

4

Oh i didnt realise you made a reply sorry haha, yours is a lot better than mine! :smile:

5

Sorry bud. Had my window fully extended while typing it out, hence didn’t see you typing, and you’re fairly spot on as well :smiley:, I missed that subtle size change towards the end in the fades.

6

haha same here, no worries at all mate!