Circle transition from button position

I an trying to make a transition where if I click a button, a dot appears at the position of the cursor and gets larger until it covers the entire screen, then the dot disappears by a hole in the ui getting bigger from the center of the screen until the whole transition UI disappears.
Thank you for any help!

I have seen a few other devforum posts similar to what I need but they aren’t what I need.
Here is one of the similar posts: Circular Transition Screen

What parts do you need help with?

I don’t necessarily need code but I would appreciate a code sample, I just need a way to mask a hole in a GUI object or another way to make a transparent circle appear inside of a GUI.

I have no idea how to do the 2nd half of the transition.

To be clear, is this sort of transition what you’re looking for?

Yes, that is exactly what I am looking for.

The first part is simple—just an ImageLabel of a black dot with a high ZIndex that you tween to be large enough to completely cover the screen.

The second part you could solve by taking the second half of the transition in that post you linked, or you could implement it yourself by combining several GUIs together: a “hole” ImageLabel, and Frames to fill in the edges. The math for positioning the filler Frames is pretty straightforward, so you just need to tween the size of the “hole” until it’s big enough to fill the screen, and keep the filler frames in sync.

This is one possible layout of the image label (white) and the filler Frames:

image

How could I calculate the position the frames should be in?

Edit: I just remembered anchorpoints exist :person_facepalming:

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.