How do i use tweenservice to move frames/buttons?

Help and Feedback Scripting Support
#1

I want to make a function when someone clicks a button, a gui will appear moving from the side (with ease) but i dont know how to achieve it, please dont send me links from other pages or from roblox dev hub cause i cant understand them. How i can do this? Iā€™m hated

4 Likes
#2

pls look on dev hub and give it some time, tween is extremly easy thing, it just have some tween info, where you say if tween have got ease, ā€¦ , then there is goal, what is array, where you have properity as key and value as value and then there is what object you are tweening

#3

What you are after is TweenService. With GUI objects they have a built in method for tweening their position and size. You can find the references here: TweenPosition, TweenSize and TweenSizeAndPosition.

Here is a little example of how you could tween the position of a gui object:

local Frame = script.Parent.Frame

Frame:TweenPosition(UDim2.new(0,100,0,10), Enum.EasingDirection.Out, Enum.EasingStyle.Linear, 10, false, function()
	print("Tween has finished")
end)

For reference here are the parameters for the TweenPostion function:

Tween
Tween1033Ɨ470 34.1 KB

3 Likes
#4

I think you may want to try something like this:

button = script.Parent --This is the button
frame = script.Parent.Parent.Frame --This is the frame you want to pop up when the button is clicked

onScreen = false --Checks if the frame already is on the screen

button.MouseButton1Up:Connect(function() --This detects when the player clicks on the button
	
	if onScreen == false then --If the frame is on the screen
	onScreen = true --Now the frame is on the screen
	
	frame:TweenPosition(UDim2.new(0.5, 0, 0.5, 0), 'Out', 'Sine', 1, true) --Makes the tween, change the position to what you want
	
	else --Else if the frame is not on screen
	onScreen = false --The frame is no longer on the screen
	
	frame:TweenPosition(UDim2.new(-1, 0, 0.5, 0), "Out", "Sine", 1, true) --Makes the tween, change the position to what you want
	
	end
end)
2 Likes
#5

Use
GuiObject:TweenPosition(UDim2.new(), nil, nil, time)
GuiObject:TweenSize(UDim2.new(), nil, nil, time)
GuiObject:TweenSizeAndPosition(UDim2.new(), nil, nil, time)
U can use nil or the Enums or even the strings doesnā€™t matter

Also, If you cannot understand developer hub, then Iā€™m afraid you should start with some basics since I am assuming you do not understand simple definitions

2 Likes
#6

Tween service is very user-friendly. At the start of the click, you need to toggle the guiā€™s visible property.

Then can do something like this:

local ts = game:GetService("TweenService")
local ui = -- yourUIhere

local t = ts:Create(
     ui, --object being tweened
     TweenInfo.new( -- holds information about our tween
           2, -- duration
           Enum.EasingStyle.Quad, --EasingStyle
           Enum.EasingDirection.Out, --EasingDirection
           0, --Repeat count
           false, -- if true, the tween reverses after completion
           0, -- delay time
     ),
     {
           Position = UDim2.new(1) -- moves to the right
     }
)

t:Play()

Of course, after every tween you need to reset its position and visible property. If you want to know about the EasingStyles/Directions, you can visit the Roblox wiki. The wiki also has descriptions and demonstrations of the EasingStyles in both the ā€œInā€ and ā€œOutā€ EasingDirection.

2 Likes
#7

Umm, why are you using tweenservice?

This is used for 3d tweening and is time wasting for GUIs

1 Like
#8

Not necessarily - itā€™s not only used for tweening objects in a 3D space, but in a 2D space as well. TweenService offers more control of the Tween for Guis than TweenPosition, TweenSize, and TweenSizeAndPosition

2 Likes
#9

Yeah I am aware, since he has not experimented with tweening, like at all (assumption), this is the easiest method

And the question he asked was ā€˜moving itā€™ so no need for more property changes

1 Like
#10

You can easily achieve it this way

tweening a gui, on MouseButton1Click

For example, first of all you will keep your frame outside the screen, where we cant see it
like by changing itā€™s position through properties to -2,0,0,0

--or where ever you need it to tween from
    script.Parent.MouseButton1Click:Connect(function()

    local frame = script.Parent.Parent.Frame2--CHANGE JUST THIS to name of the thing you want to tween

    wait(1) frame:TweenPosition(UDim2.new(0.27, 0,0.09, 0), 'Out','Linear',0.7)--now upon clicking the frame will tween to this position

    end

so where you kept the frame initially, -2,0,0,0
from there it will tween to the new position
(0.27, 0,0.09, 0)

1 Like