Hello there, I’m trying to create a effect where when your mouse hovers over a button a frame on the button tweens forward and when your mouse leaves the button the frame tweens back.
I have a idea on how I’d create it but I thought MouseLeave was inconsistent and not firing every time the mouse leaves a button, I’m not sure on how to do this as any help would be appreciated. Thanks
What exactly do you mean by it tweening forward? If it tweens out of the way so that the mouse is already no longer on the button, it would just tween back almost immediately.
Please attach some visual examples of what you are trying to achieve.
I mean something like this:
You could see when the mouse hovers over a textbutton the effect/tween happens, this is what I’m trying to create.
(I couldn’t find anything else on the forum which looked like what I was looking for)
Credit (@BIackShibe)
This has a tween effect very similar to what you are looking for.
Which one?, I’ve already seen all of them yet they don’t seem to cover what I’m looking for.
Alright, first of all, what do you mean by, “a frame on the button tweens forward and when your mouse leaves the button the frame tweens back”?
Look at this video:
When the mouse goes over a button then a tween/effect happens.
You can use this to start the mouse hover effect
script.Parent.MouseEnter:Connect(function()
[put script here]
end)
or you can use this to end the mouse hover effect
script.Parent.MouseLeave:Connect(function()
[put script here]
end)
I do this in text buttons.
I’m not the best scripter, do correct me if im wrong.
I know how to do that But what I’m trying to figure out is how to tween it
I made a simple color change with tweening.
GIF: https://gyazo.com/02f14a2312692e138b52579f7d9364f6
This is the script I did to do that.
script.Parent.MouseEnter:Connect(function()
local info = TweenInfo.new(0.5)
local tween = game:GetService(“TweenService”):Create(script.Parent,info,{BackgroundColor3=Color3.fromRGB(255, 255, 255)})
tween:Play()
end)script.Parent.MouseLeave:Connect(function()
local info = TweenInfo.new(0.5)
local tween = game:GetService(“TweenService”):Create(script.Parent,info,{BackgroundColor3=Color3.fromRGB(62, 63, 77)})
tween:Play()
end)
I made it more complex by adding tweensize
GIF: https://gyazo.com/9fc5f4b981ed1a0f8b71e55d4dfe08b5
Script that does it:
local info = TweenInfo.new(0.25)
script.Parent.MouseEnter:Connect(function()
local tween = game:GetService("TweenService"):Create(script.Parent,info,{BackgroundColor3=Color3.fromRGB(255, 255, 255)})
tween:Play()
script.Parent:TweenSize(UDim2.new(0.079, 0,0.101, 0), "Out", "Quint", 0.25)
end)
script.Parent.MouseLeave:Connect(function()
local tween = game:GetService("TweenService"):Create(script.Parent,info,{BackgroundColor3=Color3.fromRGB(62, 63, 77)})
tween:Play()
script.Parent:TweenSize(UDim2.new(0.044, 0,0.101, 0), "In", "Quint", 0.25)
end)
-- {0.044, 0},{0.101, 0} -- 1 / ignore these
-- {0.079, 0},{0.101, 0} -- 2 / ignore these
Hope this helps! 
You could do the following:
Put your button within a frame, Frame should be sized like a button.
The frame, should have clip descendants on as well to make sure that
the line doesn’t move outside of the frame itself if it happens.
Inside the button should be 1,0,1,0 (So the button fits the whole entire frame.)
Highlight UI
Highlight, having an Anchor point of (0,0.5), So that it is able to come out of the left.
Highlight positioned at (0,0,0.5,0).
Highlight being sized at (0,0,1,0)
Now you should have this:
Line shouldn’t be visible since its small.
Now you can tween it with whatever type of style you want, If you need a script
provided you can reply to this.
Result:
You could have asked!
I use spr to give my UI nice motion
The events I use are MouseEnter, MouseLeave, and MouseButton1Down
Thanks!, how would I exactly replicate it though?. I mean when I do:
spr.target(frame)
What is the frame?, I’m guessing its the object the mouse hovers over?
The UI object you want to change the properties of. In my case, It’s a blue frame that overlaps the original text. It depends on your own UI.
How have you made it so that the text doesn’t scale down with the container? Or did you use offset for it?
It’s a separate textlabel with position and size set to the absolute position and size of the normal textlabel inside the button, parented to the blue frame