Okay I don't know if this is allowed but I just wanted to get a better idea of how something like this gui was done: https://imgur.com/a/6jUDb
What I mean by that is that it doesn't look like the creator of this gui is TweenSizeAndPositioning the bar, everything looks as the size of everything, the bar and the text is being kept the same. What I'm wondering is how do you tween your gui's this cleanly and make it hide behind something like that circle and transition smoothly out of it?
That example used ClipDescendants. This property hides anything outside of a frame's bounds, given that it is a descendant of the frame. Here's a quick example:
http://i.imgur.com/fnyFadq.gif
The red part is the thing you want to hide. The white frame around it is a frame that has ClipDescendants enabled. The red frame is parented to this frame. The semi-transparent frame is analogous to the circle in your example, which hides the edge of the white frame.