How do you tween UI objects?

so i want to tween UI elements, but i have no idea where to begin. i just figured out how to properly scale UI on all devices with the use of that one auto scale plugin

local spob = script.Parent["womp womp"]
local part = workspace:WaitForChild("touch for spongebob :D")
local tweenService = game:GetService("TweenService")
local oldPosition = spob.spob.Position

part.Touched:Connect(function(hit)
	if hit.Parent:WaitForChild("Humanoid") then
		-- i want to store the transparency of every child in the ui object, make every child of the ui transparent, position it way up, tween it down and tween the transparency to the old transparency while the ui is being positioned 
	end
end)

Maybe this will help.

1 Like

You tween the properties of the object. The type of object itself does not matter as long that the property that you are tweening can be tweened in the first place.

Take a look here:
TweenService
TweenInfo

Basically, there’s a pattern that you follow for tweening:

local tweenService = game:GetService("TweenService")
local tweenInfo = TweenInfo.new(4, Enum.EasingStyle.Linear, Enum.EasingDirection.In, 0, false 0)
local goal = {}
goal.Property1 = Some Value
goal.Property2 = Some Value

local tween = tweenService:Create(Some Instance, tweenInfo, goal)
tween:Play()

That’s the basic way of doing it. I want to point out that a lot of GUI type objects use UDim2 as a datatype, and that is on the list of datatypes that can be tweened.

1 Like

if your like me who doesn’t want to take a bunch of space in a code, here’s a more compact version

local tweenService = game:GetService("TweenService")
local tweenInfo = TweenInfo.new(1, Enum.EasyingStyle.Cubic, Enum.EasingDirection.InOut)
local part = -- // Part Here

tweenService:Create(part, tweenInfo, {Position = Vector3.fromScale(0, 0)}):Play()
-- // where in
-- // Part : is the Part you want to Tween
-- // tweenInfo : is the Information on How long/short the tween plays, etc.
-- // {Position = Vector3.fromScale(0 ,0)} : is the part what you wanted to tween.

-- // I just don't want to have too much lines of code with it, but at the same time
-- // Its a bit messy when there's a lot of tweens you have in a single script.