How do you make a pop up button GUI effect?

Help and Feedback Art Design Support
#1

Basically :

I want to try to make something like this but, the only clue I got on how they did this is with tweening and maybe MouseHoverEnter or something.

Any clues on how you could do this?

9 Likes
#2

Definitely tweens. And, since Roblox uses YouTube, you can go frame by frame or second by second to see exactly how they did it. Try going over the effect using the < and > keys.

I’m not sure if this is a video compression error, but it appears that it is being done by layering multiple buttons underneath (you can see its surface color as thin lines). I’m guessing all of the buttons are just ImageButtons that they are moving some percentage upward.

They could trigger it with MouseEnter and MouseLeave. I think those events where connected to on an invisible Frame, so even if the button moves away from the mouse, it will not trigger MouseLeave. Which would avoid a shaking effect.

2 Likes
#3

Wow that’s really cool, I may try to make something similar too as a learning experience

1 Like
#4

To clarify, just two buttons are being used per button

#5

I think they might actually be using a custom version of entrance detection, because of how reliable it seems to be (the existing events are buggy).

2 Likes
#6

Most likley, just tried making one. Heres the result :

External Media

As you can see, it works pretty well. Only problem is, unlike the video, if you move your cursor fast over it and off, it has a noticeable delay. Any way to fix that?

Heres the script. (Excuse for any bad scripting skillz, still very new)

	print("Mouse Entered")
	if script.Parent.Position == UDim2.new(0.408, 0, 0.425, 0) then
		script.Parent:TweenPosition(UDim2.new(0.408, 0,0.402, 0), "Out", "Quad", 0.5, true)
	end
	end)


script.Parent.MouseLeave:Connect(function()
	print("Mouse Leave")
	if script.Parent.Position == UDim2.new(0.408, 0,0.402, 0) then
		script.Parent:TweenPosition(UDim2.new(0.408, 0, 0.425, 0), "Out", "Quad", 0.5, true)
	end
	end)
2 Likes
#7

Adding this means that the MouseEnter/MouseLeave will not work unless the animation is done playing, but i believe you don’t need this limit at all since

the last bool on this line is the “override”, if true, this will erase the current progress of the previous activated TweenPosition and will now instead play the new one !

The results will come instantly since there would be no conditions required for the button to play,
the only issue to point out is probably MouseLeave, which sometimes do not detect that you quit the button, but you should be fine with it regardless.

3 Likes
#8

It’s all just tweening and MouseEnter/MouseLeave.

image

The button consists of three parts: the “shadow” (darker red) and the button itself (lighter red) and their container - a completely transparent frame.

image

Both the shadow and the container are completely static. If I detect a mouse entering the container, I move the button object about 20 pixels upwards. Once the mouse leaves the container, I move the button back down.

I’ve included a file containing one of the buttons (no code though).

PopupButton_Loadout.rbxm (4.8 KB)

Hopefully this helps.

5 Likes
#9

I would add a debounce somewhere in the code, just for it to run smoother.

#10

Thanks for telling me this! Finally got it to work correctly :smile:

Final Result:

External Media

Works correctly, even when moving your mouse over it fast. If you guys want it, you can download it. Or if you wanna just see the code, you can see it here:

Hope this helps anybody who wanted to do this :3

Download Link: hover button.rbxl (17.3 KB)

Script:

script.Parent.MouseEnter:Connect(function()--Checks if mouse is over button
	print("Mouse Entered")
		script.Parent:TweenPosition(UDim2.new(0.408, 0,0.425, 0), "Out", "Quad", 0.2, true)--Moves button down
	end)--Ends the part

script.Parent.MouseLeave:Connect(function()--Checks if mouse left button
	print("Mouse Leave")
		script.Parent:TweenPosition(UDim2.new(0.408, 0,0.374, 0), "Out", "Quad", 0.2, true)--Moves button up
	end)--Ends the part

--Created by 3rdhoan123
--Credit to RBLX Dev Forum
24 Likes