UiAnimate- Easy and simple way to make animations for Ui objects

Resources Community Resources
#1

UiAnimate

not sure about the name might change it

What is it?

UiAnimate is a module that allows you to make ui animations with ease.
It allows you to do things like this:
https://i.gyazo.com/f4e5dc758f7193434d94a6285c277f25.mp4
or:
https://i.gyazo.com/a9593190f9486c1f0f4eb02f52fefe53.mp4
With this amount of code:

local UiAnimate = require(game.ReplicatedStorage.UiAnimate)

local TextButton, TextButtonObject = UiAnimate.new(script.Parent)

TextButtonObject:Configuire("Hover", "Grow", {0.01})

And you can also do them at the same time:
https://i.gyazo.com/03733cded96ce15e068f456e30ebd016.mp4

How to use it

First you will need the module:

Source code:

Example code:

local UiAnimate = require(game.ReplicatedStorage.UiAnimate)

local TextButton, TextButtonObject = UiAnimate.new(script.Parent)

TextButtonObject:Configuire("Hover", "Grow", {0.01})

With just 3 lines of code the TextButton will ‘Grow’ by 0.01 when you ‘Hover’ your mouse over it:
https://i.gyazo.com/f4e5dc758f7193434d94a6285c277f25.mp4

Something else you can do is this:

local UiAnimate = require(game.ReplicatedStorage.UiAnimate)

local TextButton, TextButtonObject = UiAnimate.new(script.Parent)


TextButtonObject:Configuire("Hover", "Grow", {0.01})


TextButtonObject:Configuire("Click", "BackgroundColor", {Color3.fromRGB(0, 0, 127), "Left"})

Now when you left click the TextButton its background color will turn to Color3.fromRGB(0, 0, 127):
https://i.gyazo.com/003609281da022f1d83f2a443122fe94.mp4

How it works:

Lets go into the module

We’ll first look at the :Configuire() function

function AnimateObject:Configuire(Action, Style, ChangeTable)
	local Object = self.Object
	
	local ChosenTween = AnimateStyles[Action][Style]
	ChosenTween(Object, ChangeTable)
end

It takes 3 parameters.

If we scroll up you will see a table called “AnimateStyles”

This is the way I have it setup:

local AnimateStyles = {
	Hover = {};
	
    Click  = {};
}

The first table inside of the “AnimateStyles” table are the actions.

So ‘Hover’ is when you hover your mouse over the UiObject.

If you go deeper you will find this:

local AnimateStyles = {
	Hover = {
		["FunctionName"] = function(Object, ChangeTable)
			Object.MouseEnter:Connect(function()
			
			end)

			Object.MouseLeave:Connect(function()
		
			end)
		end
	};
	
	Click  = {
    };
}

For example this is what the “Grow” function looks like:

Hover = {
		["Grow"] = function(Object, ChangeTable)
			local OriginalSize = Object.Size
			local Amount = ChangeTable[1] or 0.01

			Object.MouseEnter:Connect(function()
				Object:TweenSize(
					UDim2.new(Object.Size.X.Scale + Amount, 0, Object.Size.Y.Scale + Amount, 0),
					"In", 
					"Quad", 
					0.1, 
					true
				)
			end)

			Object.MouseLeave:Connect(function()
				Object:TweenSize(OriginalSize, "In", "Quad", 0.1, true)
			end)

		end;
}

Custom Animations:

My favorite thing is that you can add custom animations, this is how:

Say I wanted to make a animation (or function idk what to call them) that when you hover you mouse over the object it will rotate a bit.

local AnimateStyles = {
	Hover = {
		["Rotate"] = function(Object, ChangeTable)
			--I will start by making a few variables:
			local OriginalRotation = Object.Rotation
            local RotationAmount= ChangeTable[1] 
			Object.MouseEnter:Connect(function()
				TweenService:Create(Object, 
					TweenInfo.new(0.1,Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, 0, false, 0), 
					{Rotation = RotationAmount}
				):Play()
			end)

			Object.MouseLeave:Connect(function()
				TweenService:Create(Object, 
					TweenInfo.new(0.1,Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, 0, false, 0), 
					{Rotation = OriginalRotation}
				):Play()
			end)
		end;
	};

Now in the you can do this:

TextButtonObject:Configuire("Hover", "Rotate", {11.25})

And it will look like this:
https://i.gyazo.com/85e3a9103baa2dc5ef845d8413cc099b.mp4

Documentation

Function:

.new(Object)

Description

The object is Ui object, it returns the Ui object and the self object.
The reason why I did this is so that you can define the new object while you are defining the variable for the ui element:

local TextButton, TextButtonObject = UiAnimate.new(script.Parent)

Function:

:Configuire(Action, Style, ChangeTable)

Description

Action:

The event that will cause the function to run, eg. Hover will cause the function to run when you hover your mouse over the object.

Style:

The function name, eg. Grow

Change:

This will change depending on what Style you choose, so if you choose “Grow” the change will be the number which you want the Ui object to grow by, but if you are using “TextColor” the change will be a color3 value.

Conclusion

I hope I explained it well enough, If you have any questions ask me please.

If there are any bugs or problems, please please please tell me.

Updates:

Version 1.1:

Changed the way the parameters are setup, they now take a table.

Before:

TextButtonObject:Configuire("Hover", "Shrink", 0.01)

After:

TextButtonObject:Configuire("Hover", "Shrink", {0.01})

This change allows you to do more powerful things.

The ‘RightClick’ and ‘LeftClick’ styles are replaced with ‘Click’ this is because you would have the same functions for 2 different styles.

How to use ‘Click’:

TextButtonObject:Configuire("Click", "Shrink", {0.01, "Left"})--Left click
TextButtonObject:Configuire("Click", "Shrink", {0.01, "Right"})--Right click
I tried to change all the other stuff to how it is now, tell me If I didnt change something.
22 Likes
A Ui module that I made
[Plugin] UiAnimate - Create simple ui animations in seconds
#2

This could be helpful for people who are just learning how to script, don’t understand how people who are experienced with scripting could use this. This just uses some mousehover events.

1 Like
#3

Thanks for replying!

But.

People who are experienced with scripting could definitely use this.

It isn’t just mouse hover events.
There are also click events

The point of using this is because its simple and requires very little code;

---There is a point in using this because this:
TextLabel.MouseEnter:Connect(function()
	TweenService:Create(TextLabel, 
		TweenInfo.new(0.1,Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, 0, false, 0), 
		{Rotation = 11.25}
	):Play()
end)

TextLabel.MouseLeave:Connect(function()
	TweenService:Create(TextLabel, 
		TweenInfo.new(0.1,Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, 0, false, 0), 
		{Rotation = 11.25}
	):Play()
end)

--Turns into this:
TextButtonObject:Configuire("Hover", "Rotate", {11.25})

And its much more organized.

4 Likes
#4

When i said Hover effects I was talking about the size tweening, also it could be more organized I understand but for me personally I wouldn’t use it, This could help others though like said. also it may be more organized but personally when i work with friends on a project i’d rather not use modules so they understand the code.

#5

It isn’t really fair to say this as you could just wrap tweenservice into a module and make it just as small if not smaller.

1 Like
#6

I don’t really understand why you think its unfair, could you explain it more?

#7

I dont think it’s fair comparing the size of the two functions.
As your module is handling everything in a different script, then ofc it’s gonna be smaller.

If you would have wrapped tweenservice in a module it would not be that big.
And if they problem is simplicity, then experienced scripters would not really have such of a benefit from using yours.

This module is basically tweenservice with a bunch of presets that enlarge the footprint of the code…

1 Like
#8

People don’t have to use this module if they don’t have a benefit are just don’t want to.
This module is a free resource that anyone can use if they want.

To describe it bluntly, yes, but no.

Saying that this module is basically tweenservice would be a lie, yes It does have presets which you can customize or add to.

Me comparing the size of the 2 functions was to explain to @jacky1190 how experienced scripters could use it .

2 Likes
#9

Pretty cool. I bookmarked this, I UI Design so this really comes in handy!

4 Likes
#10

It’s convenient to be able to have pre-made animations. And why would you not want to make scripting easier?

#11

Does this work for ImageButtons, if so how would I do this.

#12

Yes the ‘Click’ functions work on both text and image buttons, the code is the same.

#13

Oh wow I like this. I’ve been programming on roblox for a few years now, seems like this can make ui animations faster, even if it’s just a few lines.

1 Like
#14

I made a plugin based on this module:

#15

An experienced developer can just make their own animation module. Personally I have a main module that adds more functionatilies to Roblox core functions, like self:getLargestNumber(<number table>), self:animate(<gui object>) and many more. But for sure your module will be helpful for beginners and people who don’t want to write much code :happy1:.

2 Likes
#16

I personally wouldn’t use this. I have already scripted a module that functions a lot faster than the current one as of right now, it is also more intuitive. Also, using presets is ineffective in terms of customizing.

Perhaps newer developers could find great use in this, but this would only restrict the options of experienced developers.

2 Likes