How do i make a menu system like this?

So I’m trying to make a jojo game and since I’ve started working on it again I found a game that I would like mine to follow a similar formula and I am also really interested in the menu system.

Here it is:


Looking at the video provided, using TweenService and UserInputService you can achieve something similar.

1 Like

what about swapping from frames? is that tween service too?

1 Like

seeing this, it’s something advanced. Not really something one can do easily (not saying you can’t, it’s just that it’s hard…)
you have to take in consideration Tweening (see how the text and images move smoothly from a part of the screen to the center or somewhere else? Also using EasingStyles to have that smooth movement)

But I’m assuming you want to code, so here’s a guide to Easing:

local frame = -- add your frame, preferably make this script outside the actual frame, like in a TextButton, where you can control more frames from one script

local TweenService = game:GetService("TweenService") -- This is the TweenService, you need it for tweening in general

local Info =, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut)
--What's "TweenInfo"? Well it's just the way it's supposed to "work" when tweening.
-- The 1 is just the number in seconds that the tween should run for, higher number = longer it takes for the tween to finish
-- makes a new Tween Info, to tell the tween how to work
-- "Easing Style" makes the tween move smoothly in any way you want
-- "Easing Direction" basically tells the easing style how to go (sorry for this bad explanation, I'll send a video later)

-- before going on the next part, make sure your frame has, let's say, a size of:
X Scale = 0.1
Y Scale = 0.1
This can be changed in the Properties window
(and the X and Y offset should be 0, I'll explain it later in this script]]

local Goal = { -- this is one of the more trickier parts, this is where you tell your frame how it should tween, where'd that be size, position or rotation. Let's move a frame from the Side of the screen to the center.
Position =, 0, 0.5, 0) -- considering if you have the frame inside a screenGUI, the goal should be to put it in the center of the screen, this uses scaling as it's more reliable for looking the same on different devices, choosing offset is not the worst but it's bad as it can be positioned differently on other resolution devices
-- Let's also change it's size!
Size =, 0, 0.25, 0)

local YourTween = TweenService:Create(Frame, Info, Goal)
-- YourTween: give it any name you want, it's a variable! (also works with info)
-- TweenService:Create: Combines the Frame, the Info and the Goal (How it's supposed to end)

--now, bind this function to something like when you press a button. For example, parenting this LocalScript to a button would make it so that when you press the button (which in this case would be script.Parent), the frame you specified earlier would tween.
-- to Play a tweening animation, do this:
-- to cancel it, do:
-- to Pause it:

-- if you want to do something after the tween is done, you have to use:
YourTween.Completed:Wait() -- if you don't use this, it's basically running 2 things at the same time, for example:

print("Tween has finished") -- would play the tween AND print it, while

YourTween.Completed:Wait() -- would play the tween, wait for it to finish
print("Tween has finished") -- and then continue

-- Hooray! You know something more now!

References for later usage:
This helpful video shows you the Easing Styles and Easing Directions (While in Adobe Animate, this works for Roblox aswell. If you want to go into more detail, go to 2:52)

This documentation explains to you exactly what I did before, but probably explained better:

1 Like

Yup, learn TweenService because it can be VERY useful and also @qMrSpooky example is good on how it can be achieved.

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