How to make a frame fade in smoothly?

local dialog = script.Parent
local frame = game.LocalPlayer.PlayerGui.ScreenGui.Frame
local sound = game.Workspace.Sound
local Dialog = script.Parent.Parent	

-----------------------------------------------------------------

	local function sassy()
    for i = 1, 10 do

		sound:Play()

        frame.BackgroundTransparency = i/10
        wait(.1)

       end
	end
	
	
	
	
	 
	Dialog.DialogChoiceSelected:Connect(function(sassy)
	 print("working")
	end)

So I'm trying to make a frame fade in smoothly but I don't know why this isn't working. Am I accessing the PlayerGui and DialogChoiceSelected correctly?

Like that

To make transparency use + and to make visible use -

sound:Play()
for i = 1, 100 do
	frame.BackgroundTransparency = frame.BackgroundTransparency + 0.01
	wait()
end

Use TweenService. Tweens are used to interpolate the properties of instances. These can be used to create animations for various Roblox objects. Almost any numeric property can be tweened using TweenService. Note that only specific types of properties can be used with TweenService. The types of properties that can be tweened are:

• number
• bool
• CFrame
• Rect
• Color3
• UDim
• UDim2
• Vector2
• Vector2int16
• Vector3

TweenService has just one function, TweenService:Create, which takes information about the animation and generates the Tween object which can be used to play the animation. Note that Tweens can animate multiple properties at the same time.

Details on how the interpolation of the tween is to be carried out are given in the tweenInfo parameter of TweenService:Create. The TweenInfo data type includes a range of properties that can be used to achieve various styles of animation, including reversing and looping Tweens.

Multiple tweens can be played on the same object at the same time, but they must not be animating the same property. If two tweens attempt to modify the same property, the initial tween will be cancelled and overwritten by the most recent tween

Although other methods exist for tweening objects, such as GuiObject:TweenSizeAndPosition, TweenService allows multiple properties to be modified and for the animation to be paused and cancelled at any point.

TweenService:Create() takes three parameters. First one is the instance to be tweened. GUI objects, Parts and other kinds of stuff can be placed in the instance parameter. Second one is a TweenInfo used to tween the instance. (see API Reference: TweenInfo for information on that) Last parameter is a table containing all properties that you want to change.

If this helped, please accept the answer. I'm glad to help.