One-Line TweenService Wrapper

Resources Community Resources
,
#1

Whenever I’m working with animated UI for a project, I’ve always found the default TweenService API to be very complicated to use.

Why do I need to create a new TweenInfo object in my code every time I want to make a simple ui transition?

It wasn’t long before I created a simple wrapper function for one-line tweens, and since I’ve already used this wrapper in multiple games and can’t live without it I thought it might be helpful to share it here as well.

tween

Argument Description
object* The Instance whose properties will be tweened.
properties* Table of property name strings to tween.
value* Table of property values to set as tween goal (or an individual value if all properties have the same end goal value)
duration How long the tween lasts (default 0.5)
style Which EasingStyle the tween will use (default Quad)
direction Which EasingDirection the tween will use (default Out)
* = required

Wrapper module

--TweenService Wrapper
--Andrew Bereza
return function (object, properties, value, duration, style, direction)
	style = style or Enum.EasingStyle.Quad
	direction = direction or Enum.EasingDirection.Out

	duration = duration or 0.5

	local propertyGoals = {}

	local isTable = type(value) == "table"

	for i,property in pairs(properties) do
		propertyGoals[property] = isTable and value[i] or value
	end
	local tweenInfo = TweenInfo.new(
		duration,
		style,
		direction
	)
	local tween = game:GetService("TweenService"):Create(object,tweenInfo,propertyGoals)
	tween:Play()

	return tween
end

Wrapper implementation

local tween = require(replicatedStorage.Tween)

-- Fancy bounce-in transition for menus
frame.UIScale.Scale = 0
tween(frame.UIScale, {"Scale"}, 1, 1, Enum.EasingStyle.Bounce)

-- Tweening two properties with same end goal value
tween(textLabel, {"TextTransparency", "TextStrokeTransparency"}, 0)

-- Tweening properties with different end goal values
tween(frame, {"BorderColor3", "BackgroundTransparency"}, {Color3.new(1,0,0), 0.5})

Bounce Example

https://i.gyazo.com/c4e88e7cd67f7c2815c9db4dfc197d1f.mp4

The function also returns the tween object that was created, but I’ve never actually had a use for this myself. It isn’t limited to UI either- you can use this function on any instance that has tweenable properties, which makes this great for animating parts for cool effects like laser guns, etc.

If you use this module please share with others!

27 Likes
#2

Interesting, thanks for this resource. One suggestion, I see you are using Gyazo over directly embedding into discourse. I would read this topic and suggest using ShareX over Gyazo. It’s a much better experience for everyone, and it’s simpler than having to go to an external site. The resource itself is amazing, and will be very beneficial to newer developers.

If you have any other questions send me a DM as I do not want to go off-topic. :slight_smile:

12 Likes
#3

Coulden’t you just do this instead?

local TWEEN_SERVICE = game:GetService("TweenService");
TWEEN_SERVICE:Create(object, TweenInfo.new(1), {Transparency = 1;}):Play();
1 Like
#4

This works up until you’re creating animations for multiple instances and changing multiple properties.

1 Like
#5

You can still change multiple properties? TweenService:Create properties parameter is a dictionary.

{Transparency = 1; Size = Vector3.new();}

To change the same properties to multiple objects you can just use a for loop iterating though a table.

1 Like
#6

Not sure if I’m stupid or something but where is the download link? Did I miss it?

1 Like
#8

The source code is on the topic. It’s just one function being returned in a module. Just copy and paste that into one.

4 Likes