How would I make a gui animation similar to this

Help and Feedback Scripting Support
#1

how would I make those hover animations
https://devforum.roblox.com/t/show-off-your-ui-designs/311776/431?u=no_clu360

If someone could give me a demo or something along those lines that would be helpful

2 Likes
#4

I watched this but its not what im looking for. I’m pretty sure it uses the same basic scripting(kinda)

1 Like
#5

It just tweens the size, position, and rotation.

#6

The roblox api makes little to no sense to me. What I mean by that is the way they tell you about the code and other things. I wish it was more like this. Where there is example and you can see them live, etc.

#7
#8

It provides an example at the very bottom

#9

If you could give me a sample code for me to learn from that would be great :slight_smile:

#10

I found a solution to this from this thread. Thank you tho for tryna help me. :slight_smile:

#12

Tweens, you can find some documentation here:

#13

From the sole look at this post. I’ve considered that they have used constraints, specifically UIListLayout. This will make the buttons move out as one button is enlarged. Then comes the tweening, and that’s basically it(this is a prediction).
Here;s a place file demo you asked for:
Test.rbxl (24.8 KB)

2 Likes
#14

So first off, That developer is using TweenService., As for the white glow effect, That is a white gradient which the developer also uses TweenService to make transparent.

So some code:

local TweenService = game:GetService("TweenService")
local Button = script.Parent
local Gradient = Button.Gradient

local function Tween(Obj, Info, Goal)
	if Obj and Info and Goal then
		return TweenService:Create(Obj, Info, Goal)
	end
end

Button.MouseEnter:Connect(function()
	Tween(Button, TweenInfo.new(1.15), {Size = UDim2.new(0, 125, 0, 50)}):Play()
	Tween(Gradient, TweenInfo.new(1.15), {ImageTransparency = 0}):Play()
end)

Button.MouseLeave:Connect(function()
	Tween(Button, TweenInfo.new(1.15), {Size = UDim2.new(0, 85, 0, 25)}):Play()
	Tween(Gradient, TweenInfo.new(1.15), {ImageTransparency = 1}):Play()
end)

Not sure why the coloring of the code is awkward, but you get it.

Gradients can be made in paint.net/photoshop/affinity-photo.
I personally use paint.net for all my UI.

1 Like
#15

As I see it is a combination of Tweens and MouseEnter/Leave. But they can use TweenPosition

if you want an example to the TweenPosition:

local GuiObject = script.Parent ---//You should change it to the GuiObject that needs to have the animation

GuiObject:TweenPosition(Udim2.new(0,1,0,1)) --//In the brackets after the Udim2 you should enter the position you want to animate

GuiObject(Udim2.new(0,1,0,1)) --//And this is the same thing but with size.

I am not going to give a demo version of it since this is not a place to give scripts I want you to learn about it. You can learn it better by looking at the links I sent above.

1 Like
#16

TweenInfo and TweenSize have been replaced by TweenService, please refrain from teaching new developers to do that. This is mostly due to the fact of good practice.

@LeoBlackbane
Only using TweenService doesn’t really achieve the button spacing effect(like how to buttons move out of the way when another gets bigger). It can, but using UIConstraints could be better.

#17

Mhm, I know. That would take some extra scripting, But just to give him a basic idea.

#18

I’ve made a gui animation module recently, you could use that! if you don’t know scripting:

but please read all the steps carefully.