[SMART Series] Smooth, Responsive UI with Auto-Tweening Formula (Free + Open Source)

Resources Community Resources
, ,
1

Season 1 Episode 2

What is SMART?

SMART is a series, started to largely reduce the amount of time you spend designing, coding, and overall just working. Using this series, which for the time being is Free and Open Source, will guarantee you to work faster and smarter, use it while you can!

What is SmartTween?

Have you ever gotten bored out of your mind doing tweeting for hours on end? It’s like all the math functions, then there is the positions, then the second you’re done, oh wow, I just forgot to change everything not to be offset sizing. Well, you can now quit all the hassle and leave the rest up to my new ModuleScript. No more wasting hours on dumb tweening, now you can streamline your designing workflow to go so much faster.

The problem

Without SmartTween

local TweenService = game:GetService("TweenService")

local myFrame = script.Parent

local goalPosition = UDim2.new(0.5, 0, 0.5, 0)
local goalSize = UDim2.new(0.3, 0, 0.3, 0)

local distance = math.sqrt(
	math.pow(myFrame.Position.X.Scale - goalPosition.X.Scale, 2) +
	math.pow(myFrame.Position.Y.Scale - goalPosition.Y.Scale, 2)
)

local tweenTime = math.clamp(distance * 0.007, 0.05, 2)

local tweenInfo1 = TweenInfo.new(tweenTime, Enum.EasingStyle.Quad, Enum.EasingDirection.Out)
local tween1 = TweenService:Create(myFrame, tweenInfo1, { Position = goalPosition })
tween1:Play()

-- delay slightly and tween size
task.delay(tweenTime * 0.5, function()
	local sizeDistance = math.abs(myFrame.Size.X.Scale - goalSize.X.Scale) + math.abs(myFrame.Size.Y.Scale - goalSize.Y.Scale)
	local tweenTime2 = math.clamp(sizeDistance * 0.007, 0.05, 2)

	local tweenInfo2 = TweenInfo.new(tweenTime2, Enum.EasingStyle.Sine, Enum.EasingDirection.Out)
	local tween2 = TweenService:Create(myFrame, tweenInfo2, { Size = goalSize })
	tween2:Play()
end)

Messy, hard to read, will take hours to debug

With SmartTween

local SmartTween = require(game.ReplicatedStorage:WaitForChild("SmartTween"))
local myFrame = script.Parent

task.wait(3)
SmartTween:Tween(myFrame, {
	Position = UDim2.new(0.5, 0, 0.5, 0)
}, 5, Enum.EasingStyle.Sine)

task.wait(3)
SmartTween:Tween(myFrame, {
	Size = UDim2.new(0.3, 0, 0.3, 0)
}, 5, Enum.EasingStyle.Sine)

Simple, straight to the point, errors that are easy to find

This ModuleScript is incredibly easy to use; your workflow will turn up tenfold by the time you’re finished installing this. If this isn’t a designer’s haven, I have no clue what is.

The script

If you’d like to obtain this model from an .rbxm file, then you can get it below. If you want to get it from the Creator Hub, then you can do so here.

SmartTween.rbxm (1.4 KB)

Let’s get tweening, everybody!

Example

Take this as an example if you’re still skeptical. Imagine this, you’re sitting and developing when you realize that is now time to start the tweening process. So you start.

local TweenInfo1 = TweenInfo.new(0.3, Enum.EasingStyle.Quad)
local Tween1 = TweenService:Create(frame, TweenInfo1, {Position = UDim2.new(0.5, 0, 0.5, 0)})
Tween1:Play()
-- repeat for every property, and do every calculation yourself

See how tedious that is? Now imagine if you have a script that could do it all for you and remove that difficulty from your life to turn that into this.

SmartTween:Tween(frame, {
    Position = UDim2.new(0.5, 0, 0.5, 0)
})

Would you not feel excited? I know I sure would. Now, if you still aren’t convinced, I have no idea why, but for the rest of us designers, let’s get designing!

Previous posts from SMART series

Season 1 Episode 1: [SMART Series] Perfectly Scaled UI with Equidistant Layout Formula (Free + Open Source)

Thanks for reading

Thank you all so much for reading this post! I plan to have more like this in the future. Let me know if you have any requests, such as a tutorial or further explanation. Goodbye for now!

Just so you all know, I am a mathematics-based developer working on making a few different plugins to help builders, modelers, and, as shown in this post, even UI/UX designers. So, if you are looking to find helpful posts like this in the future, tune in for more posts, and DM me to let me know you enjoyed my post. Have a great day, everyone!

8 Likes