UI Changing page with Tweens

Help and Feedback Scripting Support
#1
  1. What do you want to achieve?

I want Achieve this UI tween for the changing pages of the uis… i have no idea how to make it work…

  1. What is the issue?

I cant find any tutorials about this i can find only how to change pages of the ui just with visible property so i want ask if this is possible to make?

  1. What solutions have you tried so far?

I tried everything youtube,devforum,developer hub but i cant find any solutions for my problem…

every help is greatly appreciated

2 Likes
#2

I’ll answer you in a second leme write it down

1 Like
#3

Tweening Scrolling Frames

To start make a frame and set it to be invisible. Make sure ClipsDescendants is turned on.

Now place this where the UI should tween into view. Add your UI inside this frame and move it down by setting its position on the Y.Scale axis to 1.

In the script when a button is pressed use this tween:

Coming into view 

local invisibleframe = script.Parent.Frame -- Location of this invisible frame. -- The invisible frame.
local selectedFrame = invisible["Frame Name"] -- The frame you want to tween.
local TweenService = game:GetService("TweenService") -- Tween service
local Info = TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut) --Tween Info
local goal = { -- Moving into view
    Position = UDim2.new(invisibleframe.SelectedFrame.Position.X.Scale, 0, 0, 0)
}

local Tween = TweenService:Create(selectedFrame, Info, goal)
Tween:Play()

Going out of view 

local invisibleframe = script.Parent.Frame -- Location of this invisible frame. -- The invisible frame.
local selectedFrame = invisible["Frame Name"] -- The frame you want to tween.
local TweenService = game:GetService("TweenService") -- Tween service
local Info = TweenInfo.new(0.5, Enum.EasingStyle.Quad, Enum.EasingDirection.InOut) --Tween Info
local goal = { -- Moving into view
    Position = UDim2.new(selectedFrame.Position.X.Scale, 0, -1, 0)
}

local Tween = TweenService:Create(selectedFrame, Info, goal)
Tween:Play()
wait(0.5)
selectedFrame.Position = UDim2.new(selectedFrame.Position.X.Scale, 0, 1, 0) -- Resets position
1 Like
#4

I will test it give me few minutes

1 Like
#5

2022-10-02 (4)

I am supposed to do it like this?

how i can selectedFrame connect to Frame i want to tween?

#6

Yea it’s exactly what I meant, you can change some stuff with some creative ideas and clean it up a bit but at line 2 change Invisible to invisibleFrame

1 Like
#7

That’s the nicest ui I have ever seen.

1 Like
#8

So its supposed to be like this?

can i make somehow it cant be clicked again if it was clicked? and i click second button its gonna be clickable again? if you know what i mean

2022-10-02 (5)
2022-10-02 (5)1366×768 147 KB

2022-10-02 (6)
2022-10-02 (6)1366×768 159 KB

#9

Yes in a way, adjust the tween style/direction and speed to your liking and I guess that should work like you wanted?

#10

Check out Uipagelayout. It has what you needs. It used for pages stuffs and it included with tween property whne switching pages

1 Like
#11

woah i never expected i dont need script this… tysm you are amazing… i have last one question how i can connect UiPageLayout to button so i dont need to use wheel on the mouse to change the page?

1 Like
#12

not really what you mean Connect with button but I think you wnat like switching pages via clicking button. if it is then use this function

UIPageLayout:JumpTo(Page: Instance)

  • For Changing to page that given in the parentheses instance pages (make sure the page are in the pages of UIPageLayout)

Check out more on uipagelayout devhub. it have all the information about it that u can use

There’s also a property where you can turn off changing page via scroll/gamepad/mobile

#13

Alright Thank you so much guys!

1 Like