I have been making a Menu UI and I’m stumped on how I could make the UI transition to different parts such as the teams and store smoothly. I need ideas on what I could do.
Feedback would also be appreciated.
14 Likes
Do you want like how to get all the text off the screen then have the shop and stuff?
2 Likes
I know how to do it, I just need ideas.
3 Likes
Well maybe have all the selectable text go off to the right one by one form top to bottom, then have the “Area-27 V2” go out to the top after all the selectable text?
If you want to have a transition, it needs to be fast. Despite cool animations, nobody wants to wait a few seconds for the next screen to appear. It tends to get annoying after a bit.
A quick and nice transition is to hide the current buttons, display the new buttons a bit lower and move them up quickly. Something like this: click here
5 Likes
I think you could tween everything to the left side and then have have the other UI come in from the right side or have it come out of the same place as the UI went out of focus on the screen (left side).
3 Likes
I think it would look cool if when you clicked one of the labels, it would slide off to the left, followed closely by the two next closest ones and so on…
6 Likes
You can allign them one next to eachother so that only one is visible at the time and lerp towards the one you need. Considering your current design, I’d lerp the buttons to the left with bounce tween and then bring the menu from the right with linear tween.
Bouncy Gates
Slide
Fade
These pages may also help you with ideas:
https://tympanus.net/Development/CreativeButtons/
http://ianlunn.github.io/Hover/
https://developer.roblox.com/api-reference/enum/EasingStyle
Oh, and remember those PowerPoint presentation you made back in highschool? The ones with the coolest 60 second transitions between each slide? They might just come in handy! 
12 Likes
Thanks for the idea, I’m going to try the fade effect.
3 Likes
With a UI concept like that, I would honestly say you should have it to where, upon hovering the mouse over the button, it enlightens from darkness to the white. And when the cursor leaves, it fades into darkness within a short amount of time-span. This applies when entering the other selections as well making it transition somewhat ominous.
Another idea that you could try is…if you’re really wanting to make it differ from most UI concepts. The white bar could shatter into bits and pieces upon leaving, and reforming when hovering over another selection.
1 Like
Honestly, the way this UI is designed, it almost seems like a fade-in type of transition rather than a tween-in. I don’t know what kind of game this is, so it’s a bit difficult to tell if it’s the right design, but to me, it gives off a horror-esque (or even murder/mystery) game menu UI.
1 Like