Using TweenPosition or TweenService for UI

[NinjoOnline]

I’ve kinda always used TweenPosition, TweenService, etc. for UI animations. Wondering if TweenService would be a better option for this kinda stuff?

Using say this as an example

button.MouseEnter:Connect(function()
	button.Label.Visible = true
	button.Label:TweenPosition(UDim2.new(1, 0, 0.5, 0), 'Out', 'Quad', 0.1, true)
end)

button.MouseLeave:Connect(function()
	button.Label:TweenPosition(UDim2.new(0.95, 0, 0.5, 0), 'Out', 'Quad', 0.1, true)
	wait(0.25)
	button.Label.Visible = false
end)

Seems really inefficient to create a label to slide out of the button, and then slide back when you leave the button (plus it’s really slow and weird looking)

[yin_yang (yang)]

Switching to TweenService would still provide you with the same effect shown with either :TweenPosition() or :TweenSize(), but with (obviously) little more work by needing to create the tweens in advance.

If your issue is with the “slowness” of your current tween, consider checking out the possible EasingStyles: EasingStyle | Documentation - Roblox Creator Hub

[yin_yang (yang)]

Also check out this handy cheat sheet that shows you different combinations of EasingStyles and EasingDirections: Easing Functions Cheat Sheet

[colbert2677 (ImagineerColbert)]

Ideally, you’d like to use TweenService if you have the intention of applying more than just move and resize tweens to properties. You should be good otherwise for using TweenPosition/Size of a GuiObject. It’s up to your own preference realistically, there is no “better way”. Personally, if I only have the intention of tweening the position for something, I find it’d be a waste of time to create a tween when a method can be called directly on the object.

Fun fact: did you know you can actually hook a function to be ran when a tween completes? I didn’t, not until some time ago. I don’t know if the function runs if the tween is overriden, but it’s a cool little addition I never took notice to.

TweenPosition(Position, Direction, Style, Time, Override, function()
    -- hi
end)

The reason why the label is acting weird is because no matter what happens, after 0.25 seconds approximately of the mouse leaving the GuiButton, the visible will be set to false. That’s probably what’s causing the weird behaviour. Not quite sure how to quell it - perhaps you can determine visibility another way?

button.Label.Visible = whatever and whatever or whatever condition

[yin_yang (yang)]

@colbert2677

Fun fact: did you know you can actually hook a function to be ran when a tween completes? I didn’t, not until some time ago. I don’t know if the function runs if the tween is overriden, but it’s a cool little addition I never took notice to.

After 2 years of dealing with Tweens I’ve never discovered such a thing…

[buildthomas]

You should use TweenService. It can do everything that these weird custom methods can, and on top of that it will work fine anywhere, not just when your UI elements are parented to the PlayerGui. (You cannot use TweenPosition/etc on elements that are not inside the PlayerGui at that moment, it will throw errors, which can lead to some interesting bugs if you are making a reactive UI that unparents/parents in elements as needed)

I can imagine these weird custom methods will be deprecated at some point in time in favor of TweenService calls.