How to show more and more of text?

[SpeakerDev]

Hello, fellow developers. I am making a TextButton that grows larger when the mouse enters it and grows smaller when the mouse leaves it. However, the TextLabel inside the button just clips outside the button when it gets smaller. How can I make the text act like this?

Any ideas?

Thanks,
SpeakerDev

[kom297 (peter griffin)]

You could have your text underneath and then a black GUI element one layer up that would get tweened to the side and or its size, once your mouse touched it or entered an invisible box around both of them, here’s a little example of what it might look like (i haven’t done much with tweening guis so here’s the wiki on it GUI Animations)

local mouseBox = script.Parent.mouseBox
local cover = script.Parent.Cover

mouseBox.MouseEnter:Connect(function()
     --size
     cover:TweenSize(UDim2.new(0, 500, 0, 300))
     -- position
     cover:TweenPosition(UDim2.new(0.5, 0, 0.5, 0))
end)

[SpeakerDev]

I don’t think this could work, because the actual button isn’t surrounded by black. That was just an example GIF I animated. The real button would go from this:

to this:

whilst preserving the text. (The button also isn’t surrounded by green, either, that’s just the ground behind it)

[kom297 (peter griffin)]

You could hide the text behind the backpack and then scale out the background object to that size and once it’s scaled out (using tweening of course) tween the position of the text+scale to where you want it. Or just always have the text be there and that size and only tween the background-size

[kom297 (peter griffin)]

Oh and the text would be invisible of course until the tweening is completed