I've never used tweening, but I think I will

Yes, you read the title right… I have been scripting on roblox for 2 years (I only got serious about it about a year ago) and have never used the tween service, not even once. I just saw a video though, by devking, and now I want all my UIs to fade in like that. It looks so amazing.

Now, here is my problem. I have 0 clue how to do this. When I want a UI to come up smoothly, how do I do that? Do I position the UI out of the players view, and when they click a button I tween it in? Or do I position the UI out of the view, and disable it, and when they click a button it sets the visible property to true and then tweens it into view??

Sorry if I was able to turn such a simple thing into a long post, but like I said have have NEVER used the tween service, and I still dont fully understand it

Tweens are simple: Set an Instance, their tweening information, and the target. We’ll get to that later.

Say we have a Frame which the user does not see, as Visible = false and Transparency = 1. How would we make it visible smoothly?

Hint: Not this way.
while Frame.Transparency ~= 0 do
    Frame.Transparency -= 0.01

-- or this way
Frame.Transparency = 0.99
Frame.Transparency = 0.98
-- ...

First of all, we want to include a Tween Information. As stated before, it lets the tween know how to tween the property to the target, essentially its behaviour. Note that after creation, you cannot modify it. You can store TweenInfos in a variable:

local Info = TweenInfo.new()

The .new() constructor takes these parameters:

  • Time {number}: The time it takes to play the tween.
  • EasingStyle {Enum}: How the tween is played. Example: Linear will tween the property continuously in a straight line, and Exponential will start quickly, and ending slowly.
  • EasingDirection {Enum}: The direction to play EasingStyle.
  • RepeatCount {number}: How many times to replay the tween after playing it once.
  • Reverses {boolean}: If true, plays the tween in reverse after completion, essentially back to its original position.
  • DelayTime {number}: How long to delay the tween before playing.

A complete TweenInfo would look like this:

local Info = TweenInfo.new(
    0.2, -- Time
    Enum.EasingStyle.Exponential, -- EasingStyle
    Enum.EasingStyle.In, -- EasingDirection
    0, -- RepeatCount
    false, -- Reverses
    0 -- DelayTime

Now that we have the TweenInfo complete, let’s get to tweening our Frame.
First, we want to create the tween using TweenService’s :Create() method:

local TweenService = game:GetService("TweenService")

local Tween = TweenService:Create()

This method takes the following parameters:

  • Instance {Instance}: The object you want to tween.
  • TweenInfo {TweenInfo}
  • PropertyTable {Table}: The target property or properties after tweening. If the instance provided does not have the properties stated here, it will error.

This would be a Tween after we create it:

local TweenService = game:GetService("TweenService")

local Info = TweenInfo.new(
    0.2, -- Time
    Enum.EasingStyle.Exponential, -- EasingStyle
    Enum.EasingStyle.In, -- EasingDirection
    0, -- RepeatCount
    false, -- Reverses
    0 -- DelayTime

local Tween = TweenService:Create(
    script.Parent, -- Instance, for example, the frame
    Info, -- TweenInfo
    { -- Properties
        Transparency = 0
        -- As long as the property exists, it will be tweened
        -- If not, it will error.

To play a tween we can call the :Play() method.


That’s the basics of tweening! You can always learn more from the documentation: TweenInfo, and TweenService.


I’m not saying this is the best or even correct way of doing this but yeah, I use this one most of the time.
Edit 3: I accidently pressed delete and I had to revert it back

1 Like

Anything your ever going to want to know about tweening is here:

It goes over different methods of smoothly moving instances and the different curves.

Thank you so much for the information. This actually seems pretty simple. I have one final question, before I tween an object, should it be out of the players view? Or out of the players view and have the Visible property set to false? (For a GUI that tweens into view)

Wow, you only started using it two years after starting to script? That’s kinda wild, I don’t know how I could live without tween service. Just something to add: Don’t use :TweenPosition(), :TweenSize(), :TweenSizeAndPosition() methods of GuiObject. TweenService is better than it.

1 Like

How would I do it then?

30 min)))))))))))))))))))))))

Edit: Nevermind…I didnt understand the first time I saw your comment

Visible on false essentially means the user can not interact with the UI at all. Sure, you can move it out of place, but most of the times, having Visible set to false is just enough.

Also, don’t just set Transparency to 1 - The user can’t see it but it is still there.

Alright. This makes me understand, though I do not think you understand what I was asking completely

I did, I just answered something else for no reason.

However you want to display the UI is completely up to you. Whether you want the frame to pop in, or appear from a side. If latter, it’s recommended to move the frame aside and have Visible set to false, just in any case.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.