Community Resources - Simple Smooth UI Interaction

What is it?

It’s a script that makes your UI more interactive, and by that, i mean popping up, highlighting itself! It’s a easy way of making your UI’s more alive, and overall satisfying for the players!

What does it work with?

It works with TextButtons and ImageButtons only!

How does it work?

It’s simple! It simply uses Collection Service to locate every TextButton and ImageButton in your game! Using Collection Service is very good for your game, because it replaces what would be a bunch of individual scripts every single ui, its a great way to optimize! For the animation, it uses Tween Service to create the smooth, and satisfying animations.

Who knows! Maybe players could stay in your game for longer because of the animations!

How does it look like?

Here’s a clip that i got in studio!

robloxapp-20240918-1542231.wmv (958.2 KB)

What do i need to do for it to work?

  • First, you have to identify the TextButtons and Image buttons in your game, and then, in the Properties tab, locate the Tags property, and then, click the + icon, and insert this into the the textbar: Button.

  • Second, you NEED to have your guis to be sized on the SCALE property AND NOT OFFSET property!

  • Third, set the AnchorPoint to (0.5, 0.5)

  • Fourth and last, place the SmoothGUIInteraction in StarterPlayerScripts, which can be found in StarterPlayer.

Alright, then where do i get the model?

You can get it here!

https://create.roblox.com/store/asset/123032303370658/SmoothUIInteractions

Considering you followed the previously mentioned steps, everything should work great!

How could i customize it?
In the main script, i toggled some comments that will help a lot in the customization!

The reason why i made this is because making satisfying UI is kinda underrated, like, players could no joke play your games for longer because of this, and ive played a lot of games with beautiful ui, but with no animations, so i hope this makes your game a lot more satisfying!

Happy developing!

-bluepear

2 Likes

Hey there! I really like the concept of what you’ve made. I have some suggestions you could implement to make this even more user-friendly, polished, and allow you to take it to new heights;

  1. Modulation. You can have a ModuleScript where there would be a bunch of settings where people can customize what they want with little to interaction with actual code; This includes sound effects (on mouse enter/leave, click, etc), how much you may want a UI element to increase (or decrease) in size (basically your MultipliedSize variable), and potentially options to customize the tweens themselves.
  2. Usage of MouseButton1Down. You can further simulate a polished clicking tween by making a UI smaller when a user starts to click on it.
  3. Mouse detection on other UI elements. This isn’t nearly as easy as the other suggestions, but you can use something like maddatak’s detection module for it.
  4. Alternatives to CollectionService. Not everybody uses it; Maybe you could have them all nestled inside a folder, or have attributes that your code will then detect. This could help streamline the usage of your tool.
  5. A callback system. On top of the fact that functions like :TweenPosition already have a callback variable, your code already waits for tweens to be completed (so implementing it wouldn’t be that difficult). The impact this would have isn’t as big as the other suggestions, but maybe some developer would use it.

Hope this helps!

1 Like

Hello! Thanks for the suggestions!! I sure will be considering them!!

1 Like

Hi ya’ll! Just passing by to say that v2 is here! I’ve added some suggestions from @tinctoriall.
If you’re struggling with customizing your animation(s), go check out v2! :point_down:

Smooth UI Interaction v2

1 Like