EzUISprings - Simple UI Movement Module

Despite being on the forum for about a year and having used it extensively for information, I haven’t really contributed much myself so I felt it was time to change that, so this is my first ever resource!
Albeit; this is a small contribution.

Say hello to EzUISprings!
(Uses the spring module made by BlackShibe.)

- What is it?

EzUISprings, as the name suggests, is a module made to make spring-like movements for your GUI's as simple as possible, giving them some more life with little fuss. Geared mainly towards newer developers / people who don't typically script themselves (i.e, UI Designers). After all, who want's to write out all the CFrame math? Not you that's for sure. There's not a whole lot more to say since that's basically all it is.

There’s only like 4 main functions, each of which is pretty simple to explain:

- Setting it up.
My module can be found the roblox library here just plop it wherever and you should be good to go:

Once you have it, you can create a new instance simply by using EzUiSprings.new(). Make sure to specify your GuiObject as the constructor.

local EzUISprings = require(...) --module path (wherever you have it stored)
local MyGuiObject = script.Parent
local UISpring = EzUISprings.new(MyGuiObject)

If you want to have multiple UI elements moving all at once, I would recommend having them all together in a Frame or CanvasGroup, and giving that as your GuiObject.

- 2D UI

I don't really know how to title my headers, but this is a straightforward one. It's "the standard" UI movement, goes along with your camera movement.

EzUISpringExample2D

local EzUISprings = require(...)
local MyGuiObject = script.Parent
local UISpring = EzUISprings.new(MyGuiObject)

UISpring:ApplySpringEffect(
3, --SpringIntensity: number
false) -- UseCameraFocus: boolean

Just change the intensity to be however much you’d like the spring to move.
You can also change UseCameraFocus to true if you only want change in focus to influence the spring. Good for UI movements only when the player moves. (Assuming you aren’t already doing some camera manipulation).

There’s also a passthrough for the shove function so that you can influence the spring yourself if you’d like to.

UISpring:Shove(Vector3.new(1,0,1))

- 3D UI

Alright, the main prize, this one is just as simple as 2D actually, EzUISprings will automatically apply your object to a SurfaceGui, and display that in (roughly) the same place as it was placed on-screen beforehand.

EzUISpringExample3D1

local EzUISprings = require(...)
local MyGuiObject = script.Parent
local UISpring = EzUISprings.new(MyGuiObject)

UISpring:Apply3DSpringEffect(
1, --SizeFactor: number (I recommend keeping this set to 1 unless you are having issues with the gui not fitting on screen.)
2, --SpringIntensity: number
Vector3.new(), --BaseRotationOffset: Vector3
false, --UseCameraFocus: boolean
{}) --SurfaceGuiProperties_OPTIONAL: {[string]: any}

You can apply a rotation before any spring effects to it by changing the BaseRotationOffset property.

UISpring:Apply3DSpringEffect(..., ..., Vector3.new(0, -20, 0))  -- in degrees

20 Degrees to the left for example:
Niko Plushie looking swag and 20 degrees to the left
And if you’d like to change some properties of the SurfaceGui, just add a dictionary of properties that you’d like to change at the end of the function. (Similar to a tween goal)

local PropertiesTable = {
 Brightness = 3,
 AlwaysOnTop = false -- you CAN do this although I wouldn't as there would probably be clipping issues in first person
}

UISpring:Apply3DSpringEffect(..., ..., ..., ... PropertiesTable)

Personally, I think this goes great with fast-paced movement, as it gives a bouncier feel to everything.
EzUISpringRealExample

- 3D Mouse Influence

This one follows your mouse. Wow. In all seriousness though, this one is pretty handy for main menu's and the like.

EzUISpringExample3D2
Same-ish constructors, you get the idea at this point.

UISpring:Apply3DMouseEffect(
1, -- SizeFactor: number
2, -- Spring Intensity: number
{}) --SurfaceGuiProperties_OPTIONAL: {[string]: any}

- Done With It?

Just use :Disconnect()! Your GUI will automatically get sent back to it’s original parent, unless ReturnToParent is set to false; in which case it just get deleted.
EzUISpringExampleDisconnect

UISpring:Apply3DMouseEffect(1, 2)
task.wait(3)
UISpring:Disconnect(true) -- ReturnToParent: boolean (warning: will error if parent no longer exists)

As I’ve said at the beginning, this is my first module / resource that I’ve posted publicly. Feedback is greatly appreciated!

74 Likes

Can you make a testing place which makes use of this module in like menus for screen or idk like that?

5 Likes

Nice module man. This is an effect most FPS developers have thought about before, and this module makes it a lot simpler.

3 Likes

is gud, much wow (you should use it!!!)

2 Likes

It works great! Though, is it possible to decrease the intensity when you use the 3D mouse influence? I’m trying to make a menu out of your module and if I move my mouse too much, it tilts quite a bit. Is it possible to not exaggerate the tilting as much? Thanks :slight_smile:

Excellent module and good work, it is very sure that I will use it in the future :grinning: :+1: